一缝其、Action:是把數(shù)據(jù)傳到store的有效載荷,他是store數(shù)據(jù)的唯一來源徘六。Action本質(zhì)上是普通的JavaScript對(duì)象内边,Action內(nèi)必須包含一個(gè)字符串類型的type字段,來表示要執(zhí)行的動(dòng)作硕噩。
Action創(chuàng)建的函數(shù)假残,就是生成action的方法,在Redux中action創(chuàng)建的函數(shù)只是簡單返回一個(gè)action炉擅。Redux中只需把a(bǔ)ction創(chuàng)建函數(shù)的結(jié)果傳給dispatch()方法即可發(fā)起一次dispatch過程辉懒。store里能直接通過store.dispatch()調(diào)用dispatch()方法,但是多數(shù)情況下會(huì)用react-redux提供的connect()幫助器來調(diào)用谍失。bindActionCreators()可以自動(dòng)把多個(gè)action創(chuàng)建函數(shù)綁定到dispatch()方法上眶俩。
Reducer 就是一個(gè)純函數(shù),接收舊的state和action快鱼,返回新的state颠印。reducer一定要保持純凈,只要傳入?yún)?shù)相同抹竹,返回計(jì)算得到的下一個(gè)state就一定相同线罕。沒有特殊情況,沒有副作用窃判,沒有API請求钞楼、沒有變量修復(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來篩選出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ì)于開發(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樹,和action饶唤。reducer是純函數(shù)徐伐,它僅僅用于計(jì)算下一個(gè)state。它應(yīng)該是完全可以預(yù)測的:多次傳入相同的輸入必須產(chǎn)生相同的輸出募狂。它不應(yīng)該做有副作用的操作办素,如API調(diào)用或路由跳轉(zhuǎn)。這些應(yīng)該在dispatch action 前發(fā)生
3祸穷、根reducer應(yīng)該把多個(gè)子reducer輸出合并成一個(gè)單一的state樹性穿。combineReducers
4、Redux store 保存了根reducer返回完整的state樹雷滚。