一、Action:是把數(shù)據(jù)傳到store的有效載荷,他是store數(shù)據(jù)的唯一來(lái)源。Action本質(zhì)上是普通的JavaScript對(duì)象,Action內(nèi)必須包含一個(gè)字符串類型的type字段,來(lái)表示要執(zhí)行的動(dòng)作。
Action創(chuàng)建的函數(shù),就是生成action的方法,在Redux中action創(chuàng)建的函數(shù)只是簡(jiǎn)單返回一個(gè)action。Redux中只需把a(bǔ)ction創(chuàng)建函數(shù)的結(jié)果傳給dispatch()方法即可發(fā)起一次dispatch過(guò)程。store里能直接通過(guò)store.dispatch()調(diào)用dispatch()方法,但是多數(shù)情況下會(huì)用react-redux提供的connect()幫助器來(lái)調(diào)用。bindActionCreators()可以自動(dòng)把多個(gè)action創(chuàng)建函數(shù)綁定到dispatch()方法上。
Reducer 就是一個(gè)純函數(shù),接收舊的state和action,返回新的state。reducer一定要保持純凈,只要傳入?yún)?shù)相同,返回計(jì)算得到的下一個(gè)state就一定相同。沒(méi)有特殊情況,沒(méi)有副作用,沒(méi)有API請(qǐng)求、沒(méi)有變量修復(fù),單純執(zhí)行計(jì)算。
function ? todoApp(state=initialState, action) ?{ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?switch(action.type){ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? caseSET_VISIBILITY_FILTER: ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return ? ?Object.assign({},state, ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {visibilityFilter:action.filter ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?}) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?default:returnstate ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?} ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
注意:1、不要修改state,使用Object.assign()新建了一個(gè)副本,不能像這樣使用:Object.assign(state, {visibilityFilter: action.filter} ) , 因?yàn)檫@會(huì)改變第一個(gè)參數(shù)的值,你必須把第一個(gè)參數(shù)設(shè)置為空對(duì)象。2、在default的情況下返回舊的state
combineReducers() 所做的只是生成一個(gè)函數(shù),這個(gè)函數(shù)調(diào)用你的一系列reducer,每個(gè)reducer根據(jù)他們的key來(lái)篩選出state中的一部分?jǐn)?shù)據(jù)并處理,然后這個(gè)生成的函數(shù)再將所有reducer的結(jié)果合并成一個(gè)大的對(duì)象。
store:將action和reducer聯(lián)系在一起的對(duì)象。Redux應(yīng)用只有一個(gè)單一的store,當(dāng)需要拆分?jǐn)?shù)據(jù)處理邏輯時(shí),應(yīng)該使用reducer組合而不是使用多個(gè)store。createStore()用于根據(jù)reducer創(chuàng)建store,第二個(gè)參數(shù)是可選的,用于設(shè)置state的初始化狀態(tài)。這對(duì)于開(kāi)發(fā)同構(gòu)應(yīng)用時(shí)非常有用,服務(wù)端redux應(yīng)用的state結(jié)構(gòu)可以與客戶端保持一致,那么客戶端可以將從網(wǎng)絡(luò)接收到的服務(wù)端state直接用于本地?cái)?shù)據(jù)的初始化。
數(shù)據(jù)流:嚴(yán)格的單向數(shù)據(jù)流:應(yīng)用中所有的數(shù)據(jù)都具有相同的生命周期。
1、調(diào)用store.dispatch(action) ?Action就是一個(gè)描述“發(fā)生了什么”的普通對(duì)象。store.dispatch(action)可以在任何地方調(diào)用。
2、Redux store 調(diào)用傳入的reducer函數(shù)。store會(huì)把兩個(gè)參數(shù)傳入reducer:當(dāng)前的state樹(shù),和action。reducer是純函數(shù),它僅僅用于計(jì)算下一個(gè)state。它應(yīng)該是完全可以預(yù)測(cè)的:多次傳入相同的輸入必須產(chǎn)生相同的輸出。它不應(yīng)該做有副作用的操作,如API調(diào)用或路由跳轉(zhuǎn)。這些應(yīng)該在dispatch action 前發(fā)生
3、根reducer應(yīng)該把多個(gè)子reducer輸出合并成一個(gè)單一的state樹(shù)。combineReducers
4、Redux store 保存了根reducer返回完整的state樹(shù)。