理解redux中介軟體

2022-09-11 14:00:22 字數 1689 閱讀 5612

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 default

function

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...