react状态管理redux和mobx操作步骤

redux:

第一步: 创建仓库       vuex  =====  redux

1, 下载安装 redux 模块 和 react-redux模块
npm install redux --save
npm install react-redux --save

2,创建数据仓库文件 src/store/index.js 从redux导入创建函数creatStore, 合并函数combineReducers
import { createStore, combineReducers } from "redux";

3, 定义reducer函数
function countReducer(state = 0, action){
         switch (action.type) {
                case "ADD":
            return state + action.number
                 default:
            return state 
         }
}
4, 把多个reducer函数合并成一个
var reducers = combineReducers({
     count: countReducer,
})
5, 创建并导出数据仓库
export default createStore(reducers)

第二步: 读取仓库数据

1, 在入口文件index.js中导入状态仓库store和状态更新供应组件Provider 
import { Provider } from "react-redux";
import store from "./store/index";

2, 在入口文件index.js中,使用Provider 包裹App根组件, 并设置store
<Provider store={store}>
               <App />
   </Provider>

3, 在使用状态管理的组件中导入状态仓库联合函数connect (高阶组件)
import { connect } from "react-redux";

4, 在导出组件之前,创建状态数据映射函数映射状态数据
function mapState(store){
             return {
         name: store.name,
             }
}

5, 在导出组件之前, 使用联合函数connect把仓库中的状态数据拼接到组件的props中
MyCom= connect(mapState)(MyCom)

6, 在组件中通过this.props调用状态仓库中的数据
{this.props.name}

第三步: 更新仓库数据

1, connect高阶组件会向当前组件props中传入dispatch函数,用于状态数据的更新, 参数对应reducer函数的第二个参数action
在需要更新的位置, 更新仓库中的数据
this.props.dispatch({
                type: "CHANGE",
                 value: this.refs.input.value
         })


附加: 监听仓库中数据的更新
2, 在需要监听更新的组件中导入状态仓库
import store from "../../store/index"
store.subscribe(()=>{
                 console.log("数据已更新")
         })

注1:  store.subscribe() 添加监听后会返回一个函数, 调用返回的函数可以结束监听

注2: 如果报hooks的错,请降低react-redux版本为5.0重试

modx状态管理:

mobx状态管理实现有两种写法: 装饰器写法和非装饰器写法, 官方推荐使用装饰器语法  

(一): 非装饰器语法:
1, 下载安装模块   mobx  和  mobx-react  
cnpm i mobx mobx-react --save
2, 创建状态管理文件 /src/store/index.js  导入工具函数
import { observable, action } from "mobx";
3, 定义状态管理仓库数据 和 数据更新函数
let appState = observable({ 
         name: 'zhangsan' 
});
appState.setName = action((value) => {
         appState.name = value;
});
4, 导出状态管理仓库 
export default  appState
5, 在入口文件index.js中导入状态仓库store和状态更新供应组件Provider 
import {Provider} from "mobx-react"
import store from "./store/index"
6, 在入口文件index.js中,使用Provider 包裹App根组件, 并设置store
<Provider store={store} >
     <HashRouter>
       <App />
     </HashRouter>
   </Provider>
7, 在使用状态管理的组件中导入inject(注入)函数和observer(观察者)函数, 都是高阶组件
import {inject, observer } from "mobx-react";
8, 在导出组件之前,使用高阶组件把store注入props中并添加观察者
export default inject("store")(observer(Home))
9, 在组件中通过this.props.store调用状态仓库中的数据或更新函数
this.props.store.name
this.props.store.setName("lisi")



(二): 装饰器语法(推荐):
1, 终端执行指令, 暴漏服务端配置文件和信息
npm run eject
2, 在package.json文件下找到bebel属性, 增加下面配置
    "plugins": [
          [
            "@babel/plugin-proposal-decorators",
            {
              "legacy": true
            }
          ]
        ]
3, 下载安装模块   mobx  和  mobx-react  
cnpm i mobx mobx-react --save
4, 创建状态管理文件 /src/store/index.js  导入工具函数
import { observable, action } from "mobx";
5, 定义仓库类, 创建仓库数据并设置更新函数
class Store {
     @observable name = '铁柱';
     @action setName (option) {
       this.name = option
     }
   }
6, 创建仓库对象并导出
export default new Store()
7, 在入口文件index.js中导入状态仓库store和状态更新供应组件Provider 
import {Provider} from "mobx-react"
import store from "./store/index"
8, 在入口文件index.js中,使用Provider 包裹App根组件, 并设置store
<Provider store={store} >
     <HashRouter>
       <App />
     </HashRouter>
   </Provider>
9, 在使用状态管理的组件中导入inject(注入)函数和observer(观察者)函数, 都是高阶组件
import {inject, observer } from "mobx-react";
10, 在组件创建时, 使用装饰器语法store注入props中并添加观察者
export default 
@inject("store") 
@observer 
class Home extends React.Component{}
11, 在组件中通过this.props.store调用状态仓库中的数据或更新函数
this.props.store.name
this.props.store.setName("lisi")
注: 如果状态数据更新,视图没刷新, 且没报错, 可能是mobx和mobx-react版本不匹配, 注意版本  "mobx": "^5.15.4", "mobx-react": "^6.3.1"