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
