1. reducers 函式如何建立和聚合
2. action建立函式如何如何包裹在dispatch函式中
3. 如何給預設的dispatch方法增加中介軟體能力
(js context)中介軟體由函式組合的形式建立,實現與主要執行任務正交的功能。
tips:類似的有裝飾器模式
在 redux middleware 要裝飾的主要功能是 dispatch 函式。dispatch 函式的主要功能是傳送actions 給
reducer函式來產生新的state。
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)
從裡向外求值
2. 柯里化(curring)
通過柯里化,可以建立乙個擁有部分資訊的新函式
(bind some information)
function curring(a)
通過函式組合和柯里化能夠為資料處理建立乙個管道
redux midddleware 被設計用來在daispatch呼叫之前建立組合在一起的函式。
對dispatch的過程做包裝,不改變任何值。
1 export defaultfunction
2return createstore => (...args) =>
1011 const middlewareapi =
15 const chain = middlewares.map(middleware =>middleware(middlewareapi))
16 dispatch =compose(...chain)(store.dispatch)
17//
dispatch is the new
18return22}
23}2425
//dispatch in createstore
26//
dispatch action and run the listener callback
27function
dispatch(action) finally
3435 const listeners = (currentlisteners =nextlisteners)
36for (let i = 0; i < listeners.length; i++)
4041
return
action42}
4344
45//
46//
return a store which dispatch is decorated
47enhance(createstore)(reducer,preloadstate)
4849
//example looger middleware
50function logger()=>=>$`)
56//
dosomething
57return
returnnext58}
59 }
參考:
理解redux的中介軟體
export default function middlewares 註冊中介軟體呼叫鏈,並由此可知,所有的中介軟體最外層函式接收的引數都是 chain middlewares.map middleware middleware middlewareapi dispatch compose cha...
深入理解redux中介軟體
摘自 please call me hr redux middleware 是 redux 的乙個 advanced feature.這個概念並不是很新奇,以為在 koa 裡面早已經實現過了.對比與原生的redux middleware koa 的 middleware 差不多相當於是爸爸級的 le...
redux 中介軟體 redux thunk
什麼是中介軟體?中介軟體指的是redux的,不是react的。中間指的是action跟store之間,也就是對dispacth方的封裝,最原始的是直接將接受過來的物件直接傳遞給store,但是如果傳遞的是乙個函式的話,就不會將這直接傳遞給store,而是先執行這個函式。常見的中間有 redux de...