redux-thunk和middleware的对比

一、 redux-thunk和一般middleware的区别和相同点：

相同点：redux-thunk其实就是redux中间件的一个典型的例子，都是对store.dispatch()的增强。
不同点：redux-thunk接收的action可以返回函数，这个函数里面可以进行其他操作；而middleware接收的action只能返回纯对象。

二、redux-thunk的源码分析

刚开始看这个源码的时候，感觉有点懵，但是看了几篇redux-thunk的文档后，再返回来看这个源码，就很好理解了，如下：

function createThunkMiddleware(extraArgument) {
  // 返回和普通middleware一样的格式
  return ({ dispatch, getState }) => next => action => {
    // 判断action为函数时，就执行这个函数，不会让他进入reducer，这里可以处理副作用
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }
    // action不是函数时，就将其发送至reducer
    return next(action);
  };
}

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

export default thunk;

通过applyMiddleware(thunk)处理之后，返回的dispatch如下：
比applyMiddleware(m1, m2, m3, ...)层级嵌套少太多了，简单，好用。

dispatch = action => {
  if (typeof action === 'function') {
    return action(dispatch, getState, extraArgument); // 传入dispatch，以便于函数内部还可以进行dispatch
  }

  return store.dispatch(action); // store.dispatch替换了next
};

三、redux-thunk的使用：

异步action：表示返回的是一个函数，而不是对象。可以在里面处理复杂的逻辑，请求等，比起普通的middleware，少写一个文件，挺好的，不用文件间来回跳转了。

// index.js

import { applyMiddleware, createStore } from 'redux';
import thunk from 'redux-thunk';
import { action1, action2 } from './actions'

 const store = createStore(
  reducers, 
  applyMiddleware(thunk)
);

store.dispatch(action1('777'))
store.dispatch(action2('888'))

applyMiddleware(thunk)只引入了这一个thunk中间件，说明每次dispatch(action)的时候，都会走这个thunk中间件，然后thunk内部会自行判断并处理。

// actions.js

const action1 = () => dispatch => {
    dispatch({
       type: 'TYPE_1',
       payload: 1
    })
}
function action2() {
    // 异步action
    return (dispatch, getState, args) => { // 可以接收这几个参数，并在函数内使用
        setTimeOut(function(){
           // ...
        }, 1000)
        dispatch(action1('787878'))
    }
}

ok，了解了，后面看一下redux-saga的源码，深入了解一下（之前只是用过，大概知道是什么样，还需深入，现在看来只有看源码才能深入学习并掌握）。