redux 源码详解
redux 單向數(shù)據(jù)流的由來
- view 視圖層;
- Action 視圖層發(fā)出的消息;(改變store里面的數(shù)據(jù))
- Dispatch(派發(fā)器)
- Store (數(shù)據(jù)層) : 用來存在應(yīng)用的狀態(tài)(數(shù)據(jù)),一旦發(fā)生變動,就要提醒view更新頁面。
redux單向數(shù)據(jù)流:
具體詳情請見阮一峰Flux架構(gòu)入門Action
-
定義. Action 是把數(shù)據(jù)從應(yīng)用(譯者注:這里之所以不叫 view 是因?yàn)檫@些數(shù)據(jù)有可能是服務(wù)器響應(yīng),用戶輸入或其它非 view 的數(shù)據(jù) )傳到 store 的有效載荷。它是 store 數(shù)據(jù)的唯一來源。一般來說你會通過 store.dispatch() 將 action 傳到 store。
-
狹義的Action
注意: 一般 type 的內(nèi)容使用 大寫字母+下劃線 的格式.
-
廣義的Action
廣義的 action 是指在中間件的支持下,dispatch 函數(shù)可以調(diào)用的數(shù)據(jù)類型,除了普通action之外,常見的有 thunk, promise 等。我們用常用的 thunk來舉個例子
什么叫thunk函數(shù)? 具體背景見阮一峰es6標(biāo)準(zhǔn)入門一書第17章Thunk函數(shù)的含義.在javaScript中函數(shù)將多參數(shù)函數(shù)替換成單參數(shù)的版本,且只接受回調(diào)函數(shù)作為參數(shù)。 例如:
ceateStore
通過該API創(chuàng)建一個store對象,該對象包含四個方法;
redux middleware
-
Redux 是一個簡單的同步數(shù)據(jù)流,當(dāng)分發(fā)一個action時,reducer收到action后,更新state并通知view重新渲染。 當(dāng)action發(fā)出后如果想要執(zhí)行一些別的操作,該怎樣處理,也就是說action發(fā)出后沒有立即執(zhí)行reducer,將redux變成異步. 這時就要借助中間件。
-
redux-middleware的數(shù)據(jù)流動.
- 中間件的由來以及原理. 中間件的思想來源于koa. 核心思想:將middleware(函數(shù))進(jìn)行組合,將當(dāng)前的middleware執(zhí)行一遍作為參數(shù)傳給下一個middleware去執(zhí)行。
原理:
app.use((ctx, next) => {ctx.name = 'Lucy'next() })app.use((ctx, next) => {ctx.age = 12next() })app.use((ctx, next) => {console.log(`${ctx.name} is ${ctx.age} years old.`) // => Lucy is 12 years old.next() })// ... 任意調(diào)用 use 插入中間件app.go({}) // => 啟動執(zhí)行,最后會調(diào)用 callback 打印 => { name: 'Lucy', age: 12 } 復(fù)制代碼ctx 參數(shù)就是 app.go 接受的對象。調(diào)用 app.go 其實(shí)會調(diào)用目標(biāo)函數(shù) app.callback,但是調(diào)用 app.callback 之前我們可以先讓參數(shù) ctx 通過一系列的中間件,最后才會傳遞給 app.callback。
使用 app.use 插入任意中間件,中間件是一個函數(shù),可以被傳入一個 ctx 和 next;調(diào)用 next 的時候會執(zhí)行下一個中間件。如果不調(diào)用 next 會阻止接下來所有的中間件的執(zhí)行,也不會執(zhí)行 app.callback。
這里的app.use()就是一個實(shí)現(xiàn)中間件。
const app = {middleware:[],callback(){console.log(ctx);},use(fn){this.middleware.push(fn);},go(){const reducer = (next,fn,i)=> { fn(ctx,next)}this.middleware.reduceRight(reducer,this.callback.bind(this,ctx))();} } 復(fù)制代碼- redux的applyMiddleware的源碼.
一般這樣應(yīng)用middleware
const finalCreateStore = compose(applyMiddleware(...middleware)//DevTools.instrument() )(createStore);const store = finalCreateStore(reducer); 復(fù)制代碼middleware的一般寫法
const m1 = store => next => action => {let result = next(action);switch (action.type) {case APP_INCREMENT_LOADING:globalProgressBar.incrementLoading();break;case APP_DECREMENT_LOADING:globalProgressBar.decrementLoading();break;}return result; };export default m1;復(fù)制代碼注:這里的compose函數(shù)請參考app.go或者參考上章FP一節(jié); applyMiddle其實(shí)用了2個中間件的思想; 源碼的詳細(xì)解釋:
作者個人博客: http://zhengchengwen.com 歡迎交流
轉(zhuǎn)載于:https://juejin.im/post/5b17fd74f265da6e1d6ca9a5
總結(jié)
以上是生活随笔為你收集整理的redux 源码详解的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: php和js操作数据库的区别,PHP基础
- 下一篇: WordPress插件开发-创建、停用、