Redux及中间件Redux-saga入门

Redux入门基础

先来张图:

Redux的应用场景

多交互
多数据源

组件角度:

某个组件的状态，需要共享
某个状态需要在任何地方都可以拿到
一个组件需要改变全局状态
一个组件需要改变另一个组件的状态

流程图:

bg2016091802

应用中所有的 state 都以一个对象树的形式储存在一个单一的 store 中。
惟一改变 state 的办法是触发 action，一个描述发生什么的对象。
为了描述 action 如何改变 state 树，你需要编写 reducers。

换句话说就是: 用户发出 Action，Reducer 函数算出新的 State，View 重新渲染

Redux中间件(middleware)的引入

redux默认的设定是 dispatch 只能接受一个对象参数，函数和promise都是不允许的, 对于action发出后,异步操作后执行 Reducer的问题，引出了中间件

中间件的最终目的是要返回一个经过重写的 dispatch方法

中间件就是一个函数，对store.dispatch方法进行了改造，在发出 Action 和执行 Reducer 这两步之间，添加了其他功能。

异步操作的基本思路：

同步操作只要发出一种 Action 即可，异步操作的差别是它要发出三种 Action。

操作发起时的 Action
操作成功时的 Action
操作失败时的 Action

Redux-saga

Redux-saga的作者 Yassine Elouafi 说:

redux-saga 是一个库，致力于在React/Redux应用中简化异步操作
（side effects，即像异步获取远程数据或者浏览器缓存数据）。

Redux-saga 是基于 saga 和 ES6 生成器函数(Generator)，辅助我们快速组织所有异步、分散的操作。

Redux saga 暴露了几个方法，称为 Effects，定义如下：

Fork 执行一个非阻塞操作
Take 暂停并等待action到达
Race 同步执行多个effect,然后一旦有一个完成,取消其他effect
Call 调用一个函数,如果这个函数返回一个promise,那么它会阻塞saga，直到promise成功被处理
Put 触发一个Action
Select 启动一个选择函数,从state中获取数据
takeLatest 意味着我们将执行所有操作,然后返回最后一个(the last one )调用的结果如果我们触发了多个时间,它只关注最后一个返回的结果
takeEvery 会返回所有已触发的调用的结果

在Redux store中插入Saga中间件

在我们定义并初始化 Redux store 的时候，我们常常这么做：

const sagaMiddleware = createSagaMiddleware();
const store = createStore(rootReducer, [], compose(
      applyMiddleware(sagaMiddleware)
);
sagaMiddleware.run(rootSaga); /* 将我们的 sagas 插入到这个中间件 */

不同reducer的关联,使用到了Redux的mapStateToProps()方法

middleware.run(saga, ...args)

动态地运行 saga。只能用于在 applyMiddleware 阶段之后执行 Saga。

+  saga: Function: 一个 Generator 函数
+  args:  Array<any>: 提供给 saga 的参数
注意事项  
saga 必须是一个返回 Generator 对象 的函数。middleware 会迭代这个 Generator 并执行所有 yield 后的 Effect。

个人理解的数据流,欢迎批评指正

1530605126665

在 React 应用中使用 Redux

Redux 官方提供了 react-redux 来简化 React 和 Redux 之间的绑定，不再需要像 Flux 那样手动注册／解绑回调函数

官方提供的两个API:

`<Provider>`

作为一个容器组件，用来接受 Store，并且让 Store 对子组件可用，用法如下： ``` import { render } from 'react-dom'; import { Provider } from 'react-redux'; import App from './app'; render( , document.getElementById('root') ); ``` 这时候``` ``` 里面的子组件才可以使用 connect 方法关联 store。 ``` ```的实现很简单，他利用了 React 一个（暂时）隐藏的特性``` Contexts```，```Context``` 用来传递一些父容器的属性对所有子孙组件可见，在某些场景下面避免了用 props 传递多层组件的繁琐。 ### `````` 它的用法非常灵活：connect([mapStateToProps], mapDispatchToProps], [mergeProps], [options])，它最多接受4个参数，都是可选的，并且这个方法调用会返回另一个函数，这个返回的函数来接受一个组件类作为参数，最后才返回一个和 Redux store 关联起来的新组件，类似这样： ``` class App extends Component { ... } export default connect()(App); ``` 这样就可以在 App 这个组件里面通过 props 拿到 Store 的 dispatch 方法，但是注意现在的 App 没有监听 Store 的状态更改，如果要监听 Store 的状态更改，必须要指定 mapStateToProps 参数。 --- #### 参考 + [redux-saga中文文档](https://redux-saga-in-chinese.js.org/) + [redux中文文档](https://cn.redux.js.org/) + [一个项目案例](https://github.com/DigAg/digag-pc-react/issues/7) (强烈推荐) + [Generator的异步应用](http://es6.ruanyifeng.com/#docs/generator-async) + [[译]处理异步利器 -- Redux-saga](https://zhuanlan.zhihu.com/p/25024255)

du1wu2lzlz / my_blog