redux 中间件

redux中间件的执行顺序

action ---> dispatcher ---> middleware 1 ---> middleware 2 ---> reducers

redux中间件函数必须遵循一个严格的函数结构

var anyMiddleware = function ({ dispatch, getState }) {
    return function(next) {
        return function (action) {
            // your middleware-specific code goes here
        }
    }
}

1. 函数的第一级得到2个参数 dispatch 和 getState
   调用 getState() 得到store中的整个state

2. 函数的第二级提供 next 参数
   执行next() 执行下一个中间件或者到redux ，这样就可以按顺序执行中间件

3. 函数的第三级提供执行的 ancion 参数
   根据action 可以执行相应的操作

常用的中间件

logMiddleware

打印日志

function logMiddleware ({ dispatch, getState }) {
    return function(next) {
        return function (action) {
            console.log('logMiddleware action received:', action)
            return next(action)
        }
    }
}

discardMiddleware

一个中间件丢弃所有发送的操作
（这个不是非常有用的,但有一点逻辑，它可以选择性地放弃一些action，而通过其他action）

function discardMiddleware ({ dispatch, getState }) {
    return function(next) {
        return function (action) {
            console.log('discardMiddleware action received:', action)
        }
    }
}

redux-thunk

异步中间件用于action异步操作

var thunkMiddleware = function ({ dispatch, getState }) {
    // console.log('Enter thunkMiddleware');
    return function(next) {
        // console.log('Function "next" provided:', next);
        return function (action) {
            // console.log('Handling action:', action);
            return typeof action === 'function' ?
                action(dispatch, getState) :
                next(action)
        }
    }
}

redux-promise

异步中间件用于action异步操作

var thunkMiddleware = function ({ dispatch, getState }) {
    // console.log('Enter thunkMiddleware');
    return function(next) {
        // console.log('Function "next" provided:', next);
        return function (action) {
           if (!isFSA(action)) {
              return isPromise(action) ? action.then(dispatch) : next(action);
              }
              
              
           return isPromise(action.payload)
              ? action.payload.then(
                  result => dispatch({ ...action, payload: result }),
                  error => {
                    dispatch({ ...action, payload: error, error: true });
                    return Promise.reject(error);
                  }
                )
              : next(action);
        }
    }
}

调用方式

function action(){
    return {
        type:'ADD_USER',
        payload:fetch('url')
    }
}