理解redux中间件
redux questions :
1. reducers 函数如何创建和聚合
2. action创建函数如何如何包裹在dispatch函数中
3. 如何给默认的dispatch方法增加中间件能力
middleware:
（js context）中间件由函数组合的形式创建,实现与主要执行任务正交的功能。
tips：类似的有装饰器模式
在 redux middleware 要装饰的主要功能是 dispatch 函数。dispatch 函数的主要功能是发送actions 给
reducer函数来产生新的state。
applyMiddleware.js
1. 函数组合
f(x) = 2x
g(x) = x^2+3x+1
(f * g)(x) = f(g(x)) = f(2x) = 4x^2 + 6x + 1
组合两个或者更多的函数，返回一个新的函数
function compose(f,g){
return x=>f(g(x))
}
从里向外求值
2. 柯里化（curring）
通过柯里化，可以创建一个拥有部分信息的新函数
（bind some information）
function curring(a){
return b=>a+b
}
通过函数组合和柯里化能够为数据处理创建一个管道
redux midddleware 被设计用来在daispatch调用之前创建组合在一起的函数。
对dispatch的过程做包装，不改变任何值。
1 export default function applyMiddleware(...middlewares) {
2 return createStore => (...args) => {
3 const store = createStore(...args)
4 let dispatch = () => {
5 throw new Error(
6 'Dispatching while constructing your middleware is not allowed. ' +
7 'Other middleware would not be applied to this dispatch.'
8 )
9 }
10
11 const middlewareAPI = {
12 getState: store.getState,
13 dispatch: (...args) => dispatch(...args)
14 }
15 const chain = middlewares.map(middleware => middleware(middlewareAPI))
16 dispatch = compose(...chain)(store.dispatch)
17 // dispatch is the new
18 return {
19 ...store,
20 dispatch
21 }
22 }
23 }
24
25 //dispatch in createStore
26 // dispatch action and run the listener callBack
27 function dispatch(action) {
28 try {
29 isDispatching = true
30 currentState = currentReducer(currentState, action)
31 } finally {
32 isDispatching = false
33 }
34
35 const listeners = (currentListeners = nextListeners)
36 for (let i = 0; i < listeners.length; i++) {
37 const listener = listeners[i]
38 listener()
39 }
40
41 return action
42 }
43
44
45 // In createStore.js, the enhance is the function returned by applyMiddleware
46 // return a store which dispatch is decorated
47 enhance(createStore)(reducer,preloadState)
48
49 // example looger middleware
50 function logger({getState})=>{
51 return (next)=>(action)=>{
52 // action
53 const returnNext = next(action)
54 const state = getState()
55 console.log(`${ation.type}=>${state}`)
56 // doSomething
57 return returnNext
58 }
59 }
参考：
