Redux基础（二）

内容参考技术胖老师文章

Redux进阶

一、中间件

这个中间件是redux的中间件，不是react的中间件。中间件可以用来做什么？比如，dispatch在进行传递action对象之后到达reducer之前这段时间进行一些额外的操作就需要用到中间件middleware，在实际工作中可以用来进行调用异步接口或路由，还可以用来进行日志记录、创建崩溃报告。（中间件是对dispatchAPI作用的增强）

二、Redux中间件

1.Redux-thunk中间件

（1）Redux-thunk配置
Redux-thunk不是在Redux基础组件中，因此需要进行安装
npm install --save redux-thunk
（2）配置Redux-thunk组件：在Redux中引入中间件applyMiddleware
官网用法：

import { applyMiddleware, createStore } from 'redux';
import thunk from 'redux-thunk';
const store = createStore(
 reducers, 
 applyMiddleware(thunk)
);

但是使用官网这个用法就会无法使用React Devoloper Tools这个Chrome浏览器插件。如果想两个都使用的话就需要使用增强函数：首先引入compose
import {createStore, applyMiddleware, compose} from 'redux'
然后利用compose创建一个增强函数，代码如下：

const composeEnhancers =   window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}):compose

将thunk加进来，这样两个函数就都会执行了。
const enhancer = composeEnhancers(applyMiddleware(thunk))
绕一圈后将createStore函数中的第二个变量替换为enhancer，这样插件也可以使用了。

2.redux-thunk源码分析：

位置：node_moudel/redux-thunk/src/index

function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) => next => action => {
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }

    return next(action);
  };
}

const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;

export default thunk;

源码中所暴露出来的thunk是经过函数createThunkMiddleware进行判断的。