Redux之浅析中间件|原理篇 | 前端进阶之旅

# 一、前言

在redux里，middleware是发送action和action到达reducer之间的第三方扩展，也就是中间层。也可以这样说，middleware是架在action和store之间的一座桥梁
在redux里，action仅仅是携带了数据的普通js对象

Reducer 拆分可以使组件获取其最小属性(state)，而不需要整个Store。中间件则可以在Action Creator 返回最终可供 dispatch 调用的 action 之前处理各种事情，如异步API调用、日志记录等，是扩展 Redux 功能的一种推荐方式

Redux 提供了 applyMiddleware(...middlewares) 来将中间件应用到 createStore。applyMiddleware 会返回一个函数，该函数接收原来的 creatStore 作为参数，返回一个应用了 middlewares 的增强后的 creatStore

export default function applyMiddleware(...middlewares) {
  return (createStore) => (reducer, preloadedState, enhancer) => {
    //接收createStore参数
    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)

    //返回经middlewares增强后的createStore
    return {
      ...store,
      dispatch
    }
  }
}

@前端进阶之旅: 代码已经复制到剪贴板

未应用中间价之前，创建 store 的方式如下

import {createStore} from 'redux';
import reducers from './reducers/index';

export let store = createStore(reducers);

@前端进阶之旅: 代码已经复制到剪贴板

应用中间价之后，创建 store的方式如下

import {createStore，applyMiddleware} from 'redux';
import reducers from './reducers/index';

let createStoreWithMiddleware = applyMiddleware(...middleware)(createStore);
export let store = createStoreWithMiddleware(reducers);

@前端进阶之旅: 代码已经复制到剪贴板

# 二、为什么要引入middleware

action creator返回的值是这个action类型的对象。然后通过store.dispatch()进行分发

action ---> dispatcher ---> reducers

@前端进阶之旅: 代码已经复制到剪贴板

如果遇到异步情况，比如点击一个按钮，希望2秒之后更新视图，显示消息“Hi”。我们可能这么写ActionCreator

var asyncSayActionCreator = function (message