redux异步中间件redux-thunk与redux-saga初探

redux通过dispatch action来触发状态更新，但是，此方法只支持同步更新，组件内dispatch一个action，会立即到达reducer进行处理。针对异步方法，如从服务器获取数据等，就需要使用中间件来处理了。

本文例子，git地址：https://github.com/xiongfuquan/createbycli/tree/master/byreactapp

首先看一个不使用任何中间件的异步例子：

以上是使用纯react编写的计数器组件，可以看到，状态和事件处理都在组件内部。下面，我们引入react-redux, 将状态抽取出来统一管理。

使用react-redux后，异步处理，必须在组件内写异步请求，然后在回调里，dispatch变更action。

接下来，引入redux-thunk中间件。

action.js  action creator：

 

 可以看见，使用redux-thunk中间件后，允许我们action为function，因此，我们可以在action里面处理异步逻辑。在组件内，和同步方法一样，dispatch一个action即可。

最后，使用redux-saga中间件。

saga.js 

 

 

 

saga类似于reducer，action触发后，首先进入saga，如果由对应的action处理方法，则执行。因此，我们可以完全像dispatch同步action那样dispatch一个异步action。

 

异步逻辑，集中在saga文件里实现。