redux 單向數(shù)據(jù)流的由來

Flux將應(yīng)用分成四個部分;

• 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

let action = {type: 'ACTION_NAME',... } 復(fù)制代碼

注意： 一般 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ù)。 例如：

var Thunk = function(fn){return function(){var args = Array.prototype.slice.call(arguments);return function(callback){args.push(callback);return fn.apply.(this,args);}} }var readFileThunk = Thunk(fs.readFile);readFileThunk(fileA)(callback); 復(fù)制代碼Thunk函數(shù)版本的action: 復(fù)制代碼 (dispatch, getState) => { //在函數(shù)體內(nèi)可以使用 dispatch 方法來發(fā)射其他 action//在函數(shù)體內(nèi)可以使用 getState 方法來獲取當(dāng)前的state } 復(fù)制代碼

ceateStore

通過該API創(chuàng)建一個store對象,該對象包含四個方法;

getState();獲取store中當(dāng)前的狀態(tài)。

dispatch(action): 分發(fā)一個action,并返回這個action,這是唯一能改變store中數(shù)據(jù)的方式。

subscribe(listener): 注冊一個監(jiān)聽者，它在store發(fā)生變化時被調(diào)用。

replaceReducer(nextReducer): 更新當(dāng)前store里的reducer, 一般只會在開發(fā)模式中調(diào)用該方法。

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的源碼.

function applyMiddle(){(next) => (reducer, initialState) => {let store = next(reducer,initialState);let dispatch = store.dispatch;let chain = [];let middlewarAPI = {getState:Store.getState,dispatch: (action) => { dispatch(action)}}chain = middlewares.map(middleware => middleware(middlewarAPI));dispatch = compose(...chain)(store.dispatch);return {...store,dispatch}}} 復(fù)制代碼

一般這樣應(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)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。