redux中的Middleware

1. 什么是middlewware

• 是dispatch分发action和action到达reducer的中间件

2. 为什么要用middleware

一般我们使用 action——dispatcher——reducers 时同步情况很好，但是如果需要异步的情况就不是很好了。我们希望可以先去服务器请求数据，在渲染界面，或者是希望可以进行异步的操作。

仅仅只修改dispatch和reducer就不能满足，所以需要加上中间件，原因如下所示：

• reducer 更关心的是数据的转化逻辑
• redux 借鉴了 koa 里中间件的思想
• redux 的 middleware 是为了增强 dispatch 而出现

• 同步 与 异步
  • 同步操作只要发出一种 Action 即可
  • Redux 本身不处理异步行为，需要依赖中间件。结合 redux-actions 使用，Redux 有两个推荐的异步中间件：redux-thunk redux-promise
    后期会继续更新～

3. 如何使用

基本格式如下：
next表示下一个中间件store和action不进行任何的动作

store => next => action => {
   ...
}

举个例子：

export default store=>next=>action=> {
    if (action.type === 'LOGIN_USER') {
        request.post('/login')
            .send({name: action.text.name, password: action.text.password})
            .end((err, res)=> {
                console.log("login:",res.body)
                next({type: "CHECK_USER", checkUser: res.body});
            })
    } else {
        next(action);    //下一个中间件
    }
}

4. 详解

redux 提供了 applyMiddleware 这个 api 来加载 middleware

import compose from './compose'
export default function applyMiddleware(...middlewares) {
  return (createStore) => (reducer, initialState, enhancer) => {
    var store = createStore(reducer, initialState, 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)
    return {
      ...store,
      dispatch
    }
  }
}

• applyMiddleware：接收原来的creatStore做参数，返回一个应用了middleware的增强后的creatStore（...store,dispatch）

• middlewareAPI：每个 middleware 都可以访问 store，即 middlewareAPI 这个变量，所以就可以拿到 store 的 dispatch 方法

• chain：是一个数组，假设chain为[m1, m2, m3]，经过compose后，dispatch为m1(m2(m3(store.dispatch)))

• compose：是函数式编程中的组合，compose 将 chain 中的所有匿名函数，[f1, f2, ... , fx, ..., fn]，组装成一个新的函数，即新的 dispatch