【Redux】—入门（中间件与异步）

【背景】

Action 发出以后，Reducer 立即算出 State，这叫做同步。Action 发出以后，过一段时间再执行 Reducer，这就是异步。

怎么才能让 Reducer 在异步操作结束后自动执行呢？这就要用到新的工具：中间件（middleware）。

一、中间件的基本认知

实现思路：改造store.dispatch()方法。

中间件雏形：

【定义】

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

如上例，改造后，调用新定义的store.dispatch(action)是发出Action的动作，执行next(action)是触发reducer执行的动作。

二、中间件的用法

中间件用法

如上，就可以完成对store.dispatch()的功能增强，使其具备生成日志功能。

【注意】

（1）createStore方法可以接受整个应用的初始状态作为参数，那样的话，applyMiddleware就是第三个参数了。

（2）中间件的次序有讲究。

上面代码中，applyMiddleware方法的三个参数，就是三个中间件。有的中间件有次序要求，使用前要查一下文档。比如，logger就一定要放在最后，否则输出结果会不正确。

三、applyMiddleware

作用：将所有中间件组成一个数组，依次执行。

源码如下：

---

四、异步操作的基本思路

1.action的改变

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

*操作发起时的 Action

*操作成功时的 Action

*操作失败时的 Action

2.state的改变

state要反映不同的操作状态。

如下例：

3.总体思路

（1）操作开始时，送出一个 Action，触发 State 更新为"正在操作"状态，View 重新渲染

（2）操作结束后，再送出一个 Action，触发 State 更新为"操作结束"状态，View 再一次重新渲染

五、redux-thunk中间件

作用：

改造store.dispatch，使其能够接受一个函数作为参数。（默认只能接受对象，即要发送的action对象）

在异步操作中使用redux-thunk：

1.异步操作的dispatch

fetchPosts是一个Action Creator，返回一个函数。

这个函数执行后，先发出一个Action（requestPosts(postTitle)），然后进行异步操作。拿到结果后，先将结果转成 JSON 格式，然后再发出一个 Action（ receivePosts(postTitle, json)）。

2.注意事项

（1）fetchPosts返回了一个函数，而普通的 Action Creator 默认返回一个对象。

（2）返回的函数的参数是dispatch和getState这两个 Redux 方法，普通的 Action Creator 的参数是 Action 的内容。

（3）在返回的函数之中，先发出一个 Action（requestPosts(postTitle)），表示操作开始。

（4）异步操作结束之后，再发出一个 Action（receivePosts(postTitle, json)），表示操作结束。

总结：

异步操作的第一种解决方案就是，写出一个返回函数的 Action Creator，然后使用redux-thunk中间件改造store.dispatch。

六、redux-promise中间件

作用：

改写store.dispatch，使其可以接受 Promise 对象作为参数。

这时，Action Creator 有两种写法。写法一，返回值是一个 Promise 对象。

Action Creator返回Promise对象

写法二，Action 对象的payload属性是一个 Promise 对象。这需要从redux-actions模块引入createAction方法，并且写法也要变成下面这样。

第二个dispatch方法发出的是异步 Action，只有等到操作结束，这个 Action 才会实际发出。注意，createAction的第二个参数必须是一个 Promise 对象。

【附】redux-promise源码：

#整理自http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_two_async_operations.html