隨筆
最近需要把公司項(xiàng)目重構(gòu)，于是把react redux斷斷續(xù)續(xù)看了2個(gè)星期，才大致清楚了流程和用法，感覺初入還是有一些坑的。
推薦閱讀順序
- react 推薦阮一峰react教程，這是最簡單的react教程 ，但并沒有使用es6的語法來編寫。
- webpack 阮一峰webpack教程和ES6,如果不使用webpack打包的話，解析和瀏覽器兼容的問題會(huì)很大
- reflux 可以稍微了解一些，幫助了解redux結(jié)構(gòu)
- Redux 雖然阮一峰的教程也好，但是還是更推薦 Redux中文文檔,看理論上的東西不如跟著文檔的教程走一下，雖然這個(gè)文檔很詳細(xì)了，但是我還是花了一點(diǎn)時(shí)間才能理順。
- 注意：Redux 和 React 之間沒有關(guān)系。Redux 支持 React、Angular、Ember、jQuery 甚至純 JavaScript。盡管如此，Redux 還是和 React 和 Deku 這類框架搭配起來用最好！
- 使用react之后盡量可以慢慢拋棄jquery了
筆記
初看 Redux中文文檔，依然有很多不明白的地方，特別是store,reducer,action之間的聯(lián)系。好在后來慢慢熟悉了。
我眼里的react+redux開發(fā)步驟：(以重構(gòu)項(xiàng)目為例)
-
編寫組件
把頁面需要呈現(xiàn)的UI劃分為不同的組件，然后依次用react改寫之前的html頁面中jquery插件和各個(gè)UI部分。
-
組織state結(jié)構(gòu)
state其實(shí)是最容易但是確實(shí)最難理解的一部分，state可以看做是一個(gè)虛擬的樹結(jié)構(gòu)，它并不像一個(gè)實(shí)體對象，需要事先全部聲明有哪些類型有哪些字段，而是在你編寫組件以及action和reducer過程中會(huì)動(dòng)態(tài)根據(jù)你的定義而改變，當(dāng)然你自己得清楚你的state整個(gè)結(jié)構(gòu) 并且最好是以一個(gè)json的格式寫下來，在重構(gòu)的過程中不斷的修改和完善。
-
action
action相對容易理解，我把它比作一個(gè) 好的函數(shù)名(壞的函數(shù)名:abc(){} ) 類似 getElementByID("id")，為什么不是函數(shù)，而是函數(shù)名字，因?yàn)?action只做了函數(shù)名該做的事情，只描述給我們聽:如果調(diào)用該action 會(huì)發(fā)生生么。這里告訴我們即將會(huì)發(fā)生的就是 根據(jù)id獲取該元素。
-
reducer
如果說action的功能是函數(shù)名，那reducer就是實(shí)際操作者了，所以reducer就是函數(shù)的實(shí)現(xiàn)步驟。因此，state的狀態(tài)在這里進(jìn)行改變，要注意的是，并不是用我們所理解的“重新賦值”來改變state，而是根據(jù)你需要的功能重新生成一個(gè)state，把新的state返回出來。這里涉及到一個(gè)純凈函數(shù)pure function的思想，我們只要知道在reducer里面不要進(jìn)行修改賦值，這樣的話state永遠(yuǎn)要么是之前的狀態(tài)要么是新的狀態(tài)，而不會(huì)有修改錯(cuò)誤的狀態(tài)了。
-
store
之前講的都比較容易懂，那什么是store?
store就是聯(lián)系action和reducer的東西，我們可以通過傳入寫好的reducer來創(chuàng)建一個(gè)store， 然后我們通過store來執(zhí)行需要執(zhí)行的action，因此他們之間就聯(lián)系在了一起，而此時(shí)你根本不需要去管view該如何渲染，因?yàn)樵谑褂胷eact編寫ui組件的時(shí)候已經(jīng)把組件和state聯(lián)系在了一起。所以redux的流程就是：
使用通過reducer創(chuàng)建出來的Store發(fā)起一個(gè)Action，reducer會(huì)執(zhí)行相應(yīng)的更新state的方法，每當(dāng)state更新之后，view會(huì)根據(jù)state做出相應(yīng)的變化!
注意：再次強(qiáng)調(diào)一下 Redux 應(yīng)用只有一個(gè)單一的 store。當(dāng)需要拆分?jǐn)?shù)據(jù)處理邏輯時(shí)，你應(yīng)該使用 reducer 組合而不是創(chuàng)建多個(gè) store。
ok
流程就是這樣了
理解并不難，難的是動(dòng)手~
