redux搭配中间件实现状态管理

在Vue中可以使用vuex，在react可以使用dva（基于redux-saga实现）或者使用redux搭配中间件实现。redux作为单一的状态树吗，对数据可以做到统一管理，通过react-redux高阶函数，可以很方便的将状态映射到组件上。

• 引入redux

  npm install redux -S安装完成之后，会暴露出createStore和applyMiddleWare两个方法，前者是为了承载reducers，后者是为了承载中间件

• 引入中间件

  npm install react-redux redux-saga -S两个中间件,前者是为了开发和dva相同的体验而引入的，因为它会暴露出connenct高阶函数，通过mapStateToProps重新生成高阶组件。另外，它还会暴露出Provide组件，通过对根组件进行包裹，传入store属性就可实现状态的单一管理，以此避免每次都需要在需要的组建中重新引入store。后者是为了解决异步actions的问题，通过ES6的generator函数以同步编程的方式，实现异步效果。

image.png image.png

• 同步更新数据

  同步更新数据，其实是通过reducer对状态畸形更改，这是唯一的方式。在组件中通过dispatch进行分发事件，在reducer中回重新返回一个新的状态（view->reducer->view）

image.png

通过combineReducers对reducers进行合并，方便在组件中获取状态

image.png

• 异步更新数据

  通过redux-saga中间件，进行call拉取异步数据，通过put进入到reducer中更改状态数据

image.png

然后使用redux-saga的reateSagaMiddleware进行调用const sagaMiddle = createSagaMiddleware()注册到redux的中间件中，通过redux-saga/effects的takeEvery（take和fork的合体）方法暴露给组件调用，在store.js中运行sagaMiddle.run(rootSaga)

image.png

• 通过高阶组件实现数据绑定

image.png