Redux Hooks 玩轉redux閉包

2021-10-24 20:44:38 字數 2992 閱讀 4476

使用react-hooks實現一版簡易redux, 主要實現redux中介軟體機制,看看redux作者如何把閉包玩轉…

首先這裡提一下閉包: (我個人對閉包的認識)可能有的人認為函式返回函式就是閉包,但實則不然,簡單來說,函式返回函式會形成閉包,但它不算是閉包。 如何理解這句話呢? 閉包其實和詞法作用域相關,函式返回函式在函式被執行後,內層返回的函式在查詢變數時走的順序是從函式定義位置開始往上層查詢,所以其定義處開始實則就是到了當前函式的外層函式的函式體內,所以,而這個過程是在程式執行時產生的,所以,閉包是js執行時產生的東西,而不是在編譯時產生的東西,也就是只有這個函式被執行時才會形成閉包,也就是為什麼說函式返回函式可以形成閉包,但實際不是閉包的原因…

先給出最終實現的redux的實際呼叫格式和引數介紹:

createstore也是從實現的redux庫中匯出的乙個方法

thunk, promise, logger: 是實現的三個中介軟體,和redux中常用的中介軟體類似,用於構建redux中介軟體系統

reducer: 對狀態進行處理的reducer, 和redux中需要的reducer一樣

initialstate store倉庫的初始state, 因為這是簡易版,使用react-hooks實現,所以這個初始狀態就從外部傳遞,而不是在reducer中指定

connect 用於元件連線store倉庫,用法和react-redux中的connect方法一樣

provider 和react-redux中的provider元件的使一樣

// 整個方法的呼叫和redux的中介軟體呼叫基本類似,除了部分引數的區別之外

const

=(thunk, promise, logger)

(createstore)

(reducer,initialstate)

;

基本實現createstore

import react from

"react"

const reduxcontext = react.

createcontext()

;export

function

createstore

(reducer, initialstate)

;const

provider

= props =>

return

(>

<

/reduxcontext.provider>)}

function

connect

(mapstatetoprops, mapdispatchtoprops)

;return props =>

actions =

mapdispatchtoprops

(store.dispatch)

// 這裡的dispatch會是在middleware中介軟體機制中處理後的dispatch

return

(dispatch=

/>

)// 將state和diaptch對映進去}}

}return

}

核心: 實現中介軟體機制

// 三個中介軟體:

letlogger

= store => next => action =>

letpromise

= store => next => action =>

next

(action)

}let

thunk

= store => next => action =>

next

(action)

}

export

function

(...middlewares)

=createstore

(reducer, initialstate)

let dispatch;

// 增強dispatch方法

const middlewareapi =

//1. 先執行中介軟體的一層,將store物件的兩個個api傳遞給每個中介軟體

let chain = middlewares.

map(middleware =>

middleware

(middlewareapi));

// 3. compose返回乙個中介軟體串聯好之後的函式,然後為這個函式傳遞一action函式,這個action函式就是每個中介軟體接收到的第三層,執行實際的派發操作

dispatch =

compose

(...chain)((

...args)

=> store.

_dispatch

(...args)

) store.dispatch = dispatch;

return}}

}function

compose

(...fns)

// 這裡的args0就是在compose方法執行後再次至此該返回函式傳遞進來的(...args) => store._dispatch(...args)方法,也就是實際的派發action的方法

(...args0)

=>

(...args1)

=>

中介軟體1

(中介軟體2

(...args1))(

中介軟體3

(...args0)

)

整個compose中介軟體應該就算是整個核心了,理清了這個流程基本也就搞清楚了redux的中介軟體核心機制,在redux的中介軟體機制的流程中回形成兩層閉包,當然這還不包括在外層的哪些函式中形成的閉包…

RED啟動ARED演算法

注 關於ared ared其實ns2包中是自帶的,在tcl指令碼語言中使用red演算法時加入以下引數擁塞演算法就變成ared了,在壓縮檔案中有ared的完整應用tcl檔案,自己看看吧。use new ared redq set adaptive 1 使adaptive 的值為1 即啟動ared 演算...

spring session使用配置redis

1.新增依賴 dependency groupid org.springframework.session groupid artifactid spring session data redis artifactid version 1.2.0.release version dependency...

Django session相關操作 redis

設定session11 request.session username chen 12 設定過期時間13 request.session.set expiry 30 14 返回json字串 15return httpresponse 首頁 161718 deflogin request 19if ...