本文主要是以我的另一篇文章的思維過(guò)程來(lái)操作,希望大家使用后可以記住整個(gè)過(guò)程,從而活學(xué)活用,使用到自己的項(xiàng)目中.
參考文章:react-native中使用redux的原理分析及demo
demo地址:github.com/NextChampion/react-native-redux-navigation-example
原理分析:
在講將redux運(yùn)用到react-native項(xiàng)目中之前,我們先分析一下沒(méi)有使用redux的項(xiàng)目.這種項(xiàng)目,大概可以概括一下就是整個(gè)APP作為容器,里面存放有多個(gè)父組件,子組件,孫子組件,各個(gè)組件都含有state和props這兩個(gè)最重要的屬性.
React有props和state: props意味著父級(jí)分發(fā)下來(lái)的屬性，state意味著組件內(nèi)部可以自行管理的狀態(tài)，并且整個(gè)React沒(méi)有數(shù)據(jù)向上回溯的能力，也就是說(shuō)數(shù)據(jù)只能單向向下分發(fā)，或者自行內(nèi)部消化state的變化會(huì)引起頁(yè)面的刷新.
組件之間交互比較困難,當(dāng)APP中頁(yè)面較多,頁(yè)面內(nèi)組件比較復(fù)雜,通過(guò)修改state的方式重新渲染頁(yè)面,就會(huì)出現(xiàn)卡到爆炸的效果.所以這種方式只適合實(shí)現(xiàn)一些功能相對(duì)單一,頁(yè)面簡(jiǎn)介,頁(yè)面之間交互較少,結(jié)構(gòu)簡(jiǎn)單的APP.
下面,我們來(lái)看一下使用了redux的APP結(jié)構(gòu),下面是我按照我的理解畫(huà)了一張圖,多出來(lái)右邊三個(gè)部分,原來(lái)container外層多了一個(gè)Provider
Provider
Provider這個(gè)模塊是作為整個(gè)App的容器，在你原有的App Container的基礎(chǔ)上再包上一層，它的工作概括起來(lái)很簡(jiǎn)單，就是使得原組件變得可以接受Redux的store作為props.
Provider內(nèi)的任何一個(gè)組件,如果需要使用state中的數(shù)據(jù),必須先將該組件,使用connect方法將其與store中的state綁定到一起.使得組件和store中的state對(duì)應(yīng)起來(lái).
按照我個(gè)人的理解,使用provider包裝一層以后,原組件的state可以放在組件的props中去傳遞,并且仍保持更新state重新渲染頁(yè)面的特性.使得我們可以通過(guò)調(diào)用props中的action來(lái)改變state對(duì)應(yīng)的組件的顯示效果.高效率的解決了多組件多頁(yè)面之間數(shù)據(jù)交互困難的問(wèn)題.
Store
在 Redux 應(yīng)用中，只允許有一個(gè) store 對(duì)象，管理應(yīng)用的 state.可以理解為一個(gè)存放APP內(nèi)所有組件的state的倉(cāng)庫(kù).
可以通過(guò) combineReducers(reducers) 來(lái)實(shí)現(xiàn)對(duì) state 管理的邏輯劃分（多個(gè) reducer）。
Action
直接翻譯:行動(dòng)，活動(dòng); 功能，作用; 在這里它起到了一個(gè)數(shù)據(jù)的預(yù)處理功能,將所有的操作行為,或者事件類(lèi)型,分門(mén)別類(lèi)的區(qū)分開(kāi).
Reducer
reducer就是迎接 action 函數(shù)返回的線索的 "數(shù)據(jù) 真·處理函數(shù)"， action 是"預(yù)處理"。行為在被action分門(mén)別類(lèi)以后,reducer根據(jù)數(shù)據(jù)的類(lèi)型,去執(zhí)行不同的處理過(guò)程并返回新的state.
redux各模塊之間的聯(lián)系
將整個(gè)項(xiàng)目分為兩個(gè)部分:
1.Provider包裝后的視圖部分.
2.store,reducer,action構(gòu)成的邏輯部分.(此處邏輯僅僅代表組件state處理的邏輯部分)
考慮Redux是怎么運(yùn)作的：首先store中維護(hù)了一個(gè)state，我們?cè)诮M件內(nèi)dispatch一個(gè)action,store獲取這個(gè)action后,dispatch到actions中,預(yù)處理判斷該action的type,并返回判斷結(jié)果給store.store通過(guò)接收到的actionType去reducer中尋找對(duì)應(yīng)的處理過(guò)程.經(jīng)reducer處理后,返回新的state給store.store根據(jù)新state.
demo地址:github.com/NextChampion/react-native-redux-navigation-example
demo說(shuō)明:react-native項(xiàng)目中從零開(kāi)始使用redux
參考此篇文章的思維過(guò)程,手把手引導(dǎo)大家在項(xiàng)目中使用react-redux的文章請(qǐng)看demo說(shuō)明
參考文章:
www.itdecent.cn/p/f1a3c7845bb9
www.cnblogs.com/hhhyaaon/p/5860159.html
www.cnblogs.com/hhhyaaon/p/5863408.html
www.itdecent.cn/p/94c988cf11f3
segmentfault.com/a/1190000003503338
www.itdecent.cn/p/3334467e4b32
www.zhihu.com/question/41312576
www.tuicool.com/articles/vEnMFzz
