Redux使用总结
redux核心概念
store: 状态仓库，存放所有状态（很懒，只负责数据存取不负责计算）reducer: 计算者，根据action类型，计算并返回最新状态给storeaction: 通知，改变store内值唯一的方式
下载及安装
yarn add redux -D
yarn add react-redux -D1.在项目内增加redux管理项目状态
创建redux必备3文件(redux架构), store.js actions.js reducers.js 创建 [ store.js ] [ reducers.js ] [ actions.js ] (内容可以先空，具体业务在来补充)
store.js
//1. 引入createStore
//2. 创建store并导出
import { createStore } from 'redux'
import reducers from './reducers'
export default createStore(reducers)reducers.js
//1. 引入combineReducers
//2. 定义个小状态对应的reducer
//3. 使用combineReducers 合并小状态并导出
import { combineReducers } from 'redux'
//创建测试临时状态，正式使用时删除 从actions.js 获取到type命令 对应改变状态
function getActiveVal(state = '默认值' , action){
switch(action.type){
case 'TYPE值': return action.val //新增store处理
default: return state
}
}
export default combineReducers({
//key(状态名) : value(此状态对应的reducer)
getActiveVal
})actions.js
//改变 getActiveVal 状态的值
export function setVal(key){
return {
type: 'TYPE值', // 传给 reducers.js 命令
key // 修改的状态数据
}
}2.在入口文件中 / 在顶级组件引入store和Provider组件，绑定Provider和store状态
//引入store（reudx状态机）
import store from './store/store'
//引入Provider中间容器，连接store和自己的组件
import { Provider } from 'react-redux'
<Provider store={store}>
//内部所有子组件都能共享使用store的状态值
//这里不要忘记，把自己的组件塞到Provider内
<MainRouter />
</Provider>3. 在子组件内，使用store的状态值
3.1 引入connect函数
import { connect } from 'react-redux'3.2 书写filter函数具体内容，并真正注入数据
//过滤store数据，并注入到当前组件内，中间件会把完整的store注入到此函数内
function filter(store){
console.log(store)
//返回需要的数据（这里返回的数据会被自动注入到当前组件的props上）
return {
//key(状态名): value(状态值)
test: store.test
}
}3.3 在组件导出时，使用connect注入数据
export default connect(filter)(Recommend)4. 在组件内使用注入的状态机状态
//所有filter函数返回的数据，都会注入到当前组件的props上
this.props.注入的状态名
this.props.test5. 在组件内修改状态机内的状态
//发送action是唯一改变store状态的途径5.1 在actions.js内，创建对应action对象，并导出
//改变test状态的值
export function changeTest(val){
return {
type: 'CHANGE_TEST',
val
}
}5.2 在reducers.js内，增加对应的状态处理case
//创建测试临时状态，正式使用时删除
function test(state = 'testVal', action){
switch(action.type){
case 'CHANGE_TEST': return action.val //新增store处理
default: return state
}
}5.3 引入对应action对象
使用this.props.dispatch()发送action对象，让状态机改变状态
import { changeTest } from '../../store/actions'
this.props.dispatch(changeTest('新的值'))注意
使用HashRouter进行前端跳转记录！！！ 不要使用Browser路由，因为这个是服务器记录信息的路由
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读