react状态管理(redux,mobx)的安装及使用。

1.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](http://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重试

2.mobx状态管理

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](http://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](http://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"

有用的话请点赞，关注加收藏哦(｡･ω･｡)ﾉ♡