实用派粗暴理解Redux中间件

首先我们来看dispatch的官方使用方法

dispatch(action)
action (Object⁺): A plain object describing the change that makes sense for your application.

即，dispatch的action是一个普通对象，也就是我们最最常见的：

export const toggleTodo = id => ({
  type: 'TOGGLE_TODO',
  id
})

以下内容为Redux在React中的使用来做说明

当不使用中间件，而我们要进行异步操作时，我们可以在页面的componentDidMonut()里面先异步获取数据，然后再dispatch出去，但问题就是，功能我们虽然是实现了，但是当你在下一个页面又要进行异步操作的时候，得，我们就再敲（复制粘贴）一次，反正写代码爽就行，可当你要维护的时候，就崩溃了。而且你Redux说好了是状态管理器，我都把行为数据交给你了，咋我要做的事还有那么多。所以，中间件就出现了。这个中间件呢，就做了一件事情，你可以dispatch一个函数了！于是又有了非常眼熟的一个操作：

function actionName(url, params) {
    return (dispatch) => {
        fetch(url, params)
            .then( res => {
                dispatch({
                    //code
                });
            })
            .catch(err => {
                //code
            });
    };
}

在这里action返回的是一个函数，且在里面把dispatch作为参数给你准备好了，你要做的事情就是在里面为所欲为，至此你的action无论是普通对象还是函数就都可以统一管理了。

附上代码：

import { applyMiddleware, createStore } from 'redux';
import thunkMiddleware from 'redux-thunk';
import { composeWithDevTools } from 'redux-devtools-extension'; //可视化
import rootReducer from './modules'; //配置好中间件后就可以让这里的action返回函数了

const configureStore = () => {
  const middlewares = [thunkMiddleware];
  const middlewareEnhancer = applyMiddleware(...middlewares);
  const enhancers = [middlewareEnhancer];
  const composedEnhancers = composeWithDevTools(...enhancers);

  return createStore(rootReducer, composedEnhancers)
};

export default configureStore();