Redux学习笔记-中间件与异步操作

参考：http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_two_async_operations.html

中间件概念
中间件是一个函数，对store.dispatch方法进行了改造，在发出 Action 和执行 Reducer 这两步之间，添加了其他功能，使得能 Reducer 在异步操作结束后自动执行。
常见中间件的用法
- redux-logger
```
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()的功能增强。
- redux-thunk
  store.dispatch方法正常情况下，参数只能是对象，不能是函数。
```
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import reducer from './reducers';

// Note: this API requires redux@>=3.1.0
const store = createStore(
  reducer,
  applyMiddleware(thunk)
);
```
  上面代码使用redux-thunk中间件，改造store.dispatch，使得后者可以接受函数作为参数。
  
  因此，异步操作的第一种解决方案就是，写出一个返回函数的 Action Creator，然后使用redux-thunk中间件改造store.dispatch。
- redux-promise
```
import { createStore, applyMiddleware } from 'redux';
import promiseMiddleware from 'redux-promise';
import reducer from './reducers';

const store = createStore(
  reducer,
  applyMiddleware(promiseMiddleware)
); 
```
  这个中间件使得store.dispatch方法可以接受 Promise 对象作为参数。

redux-applyMiddleware()
它是 Redux 的原生方法，作用是将所有中间件组成一个数组，依次执行。下面是它的源码。

export default function applyMiddleware(...middlewares) {
  return (createStore) => (reducer, preloadedState, enhancer) => {
    var store = createStore(reducer, preloadedState, enhancer);
    var dispatch = store.dispatch;
    var chain = [];

    var middlewareAPI = {
      getState: store.getState,
      dispatch: (action) => dispatch(action)
    };
    chain = middlewares.map(middleware => middleware(middlewareAPI));
    dispatch = compose(...chain)(store.dispatch);

    return {...store, dispatch}
  }
}

秒客网

Redux学习笔记-中间件与异步操作

相关文章