redux是乙個用於狀態管理的js框架,是flux架構的一種實現(如圖)。
reducer
為乙個使用者自定義的函式,在store分發(dispacth)action時提供處理方法去更新狀態樹中的狀態。應該為乙個純函式。
action
為乙個使用者自定義的物件,裡面包含乙個type屬性,標識乙個動作型別。
核心概念總結:store是儲存所有狀態的地方,改變狀態的唯一方法就是通過呼叫store的dispatch方法分發相應的動作,該動作會經過每個使用者定義的reducer,reducer通過識別action的type,以及接收原來的狀態返回乙個新的狀態。
1、createstore函式的大概樣子:
const
createstore
=(reducer, initstate)
=>
;//初始狀態;
return
,dispatch
(action)
,subscribe()
};}
2、dispatch(action)
方法實現:
dispatch方法是比較複雜的乙個方法,應做的工作有:檢測action,檢測及防止dispatch死迴圈,觸發***。
const
createstore
=(reducer, initstate)
=>
;//初始狀態;
/* 新增** */
let indispatch =
false
;//是否正在分發action
const listeners =
;//***
/* *********** */
return
,dispatch
(action)
//2、檢測是否正在分發,以防止在reducer中呼叫dispatch而導致死迴圈。
if(indispatch)
//3、分發action
tryfinally
//4、觸發所有***
listeners.
foreach
(listener =>
listener()
);/* *********** */},
subscribe()
};}
3、subscribe(listener)
方法實現:
subscribe方法除了新增***之外,還應檢測重複監聽,返回乙個解綁函式。
const
createstore
=(reducer, initstate)
=>
;//初始狀態;
let indispatch =
false
;//是否正在分發action
const listeners =
;//***
return
,dispatch
(action)
//2、檢測是否正在分發,以防止在reducer中呼叫dispatch而導致死迴圈。
if(indispatch)
//3、分發action
tryfinally
//4、觸發所有***
listeners.
foreach
(listener =>
listener()
);},
subscribe
(listener)};
/* *********** */}};
}
這樣,redux的核心功能就實現了。
實現combinereducers 應該考慮到多層、多個reducer的情況,並且能自動將action逐層分發至每個子reducer。
1、combinereducers大概的樣子:
const combinereducers =
(reducers)
return
(action)
=>
;}
2、關鍵**實現:
const combinereducers =
(reducers)
return
(state, action)
=>
;for
(key in reducers)
return newstate;
/* *********** */};
}
實現乙個redux
大綱 1 store state action store.dispatch reducer的概念 2 redux 單向資料流流程說明 3 實現乙個 redux 4 中介軟體日誌列印及非同步呼叫實現 我們簡述一下 redux 完成一次資料更新的過程 a.首先,使用者通過操作發出 action sto...
自己動手實現redux 一
訂閱事件,返回乙個取消訂閱函式 let subscribe cb let dispatch action return export default createstore 當我們使用redux時,首先需要使用redux的createstore並且傳入reducer來建立我們的store impor...
自己實現乙個printf函式
在arm嵌入式開發環境中,串列埠一般使用arm pl011的uart實現,uart的實現原理就是實現了乙個8bits寬度,32深度的fifo,不停的往螢幕輸出乙個byte,乙個byte。這個就是硬體的實現,那麼軟體是怎麼實現列印 高階程式語言中定義的char,short,int,long,float...