redux中间件的用法

1.定义

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

2.举例 日志中间件

import { applyMiddleware, createStore } from 'redux';
import createLogger from 'redux-logger';
const logger = createLogger();

const store = createStore(
  reducer,
  applyMiddleware(logger)
);

在这里，redux-logger提供一个生成器createLogger，可以生成日志中间件logger。然后，将它放在applyMiddleware方法之中，传入createStore方法，就完成了store.dispatch()的功能增强。

3.applyMiddlewares()方法

applyMiddlewares()是 Redux 的原生方法，作用是将所有中间件组成一个数组，依次执行。

4.异步操作的思路

1.同步操作只要发出一种 Action 即可，异步操作的差别是它要发出三种 Action。分别是操作发起，操作成功，操作失败

以抓取数据为例，共有两种写法

// 写法一：名称相同，参数不同
{ type: 'FETCH_POSTS' }
{ type: 'FETCH_POSTS', status: 'error', error: 'Oops' }
{ type: 'FETCH_POSTS', status: 'success', response: { ... } }

// 写法二：名称不同
{ type: 'FETCH_POSTS_REQUEST' }
{ type: 'FETCH_POSTS_FAILURE', error: 'Oops' }
{ type: 'FETCH_POSTS_SUCCESS', response: { ... } }

异步操作的思路

• 操作开始时，送出一个 Action，触发 State 更新为"正在操作"状态，View 重新渲染
• 操作结束后，再送出一个 Action，触发 State 更新为"操作结束"状态，View 再一次重新渲染

5 redux-thunk 中间件

 操作结束自动发出一个action 加载成功后（componentDidMount方法），它送出了（dispatch方法）一个 Action，向服务器要求数据 fetchPosts(selectedSubreddit)。这里的fetchPosts就是 Action Creator。fetchPosts是一个Action Creator（动作生成器），返回一个函数。这个函数执行后，先发出一个Action（requestPosts(postTitle)），然后进行异步操作。拿到结果后，先将结果转成 JSON 格式，然后再发出一个 Action（ receivePosts(postTitle, json)。返回的是对象而不是函数，就要使用中间件redux-thunk


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

6.redux-promise中间件。

另一种异步操作的解决方案，就是让 Action Creator 返回一个 Promise 对象。这就需要使用redux-promise中间件。这个中间件使得store.dispatch方法可以接受 Promise 对象作为参数。这时，Action Creator 有两种写法。具体因为不常用不介绍。