最近公司需要重構(gòu)一個(gè)后臺(tái)管理系統(tǒng)灼捂，原因就是用到的技術(shù)比較過時(shí)渤涌，例如：react的版本是0.14.7片吊，antd的版本還是0.12.4绽昏。
之前嘗試重構(gòu)了一個(gè)頁面，這個(gè)頁面的數(shù)據(jù)非常復(fù)雜俏脊，老的代碼解決的方案往往是context全谤，對(duì)于這種方式，官網(wǎng)給出了一個(gè)Notice：
我理解的這段話的意思應(yīng)該是首先不要濫用爷贫，這樣會(huì)產(chǎn)生很多magic number從而讓代碼閱讀都不知所云认然，使用context的場(chǎng)景往往應(yīng)該是有一個(gè)父組件管理很多數(shù)據(jù)來讓它的子組件們共享這些數(shù)據(jù)补憾。
這種方式很容易讓人聯(lián)想到了redux，為了管理這些復(fù)雜的數(shù)據(jù)卷员，我在下一個(gè)頁面中使用了React+Redux-Saga+Seamless-Immutable+Reduxsauce這樣的一種架構(gòu)方式盈匾。
為什么要這么做
Redux
You Might Not Need Redux，當(dāng)你不知道你是否需要Redux的時(shí)候毕骡，那你就是不需要它削饵。我們?cè)谑褂胷edux實(shí)現(xiàn)一個(gè)功能的時(shí)候，往往需要修改三個(gè)文件：1未巫、View層dispatch一個(gè)action窿撬；2、Controller層收到這個(gè)action并執(zhí)行一些邏輯叙凡，dispatch一個(gè)action給Modal層尤仍；3、Modal層處理數(shù)據(jù)狭姨。
而在我新開發(fā)的這個(gè)頁面中，涉及到了一些非常復(fù)雜的情況：多種用戶（供應(yīng)商苏遥、子商戶）饼拍、多種模式（正常報(bào)名、修改報(bào)名）田炭，以及要修改一些粒度非常小的數(shù)據(jù)（為一個(gè)商戶關(guān)聯(lián)商品并將商品信息展示出來师抄，修改關(guān)聯(lián)的商品的圖片等）。拿到這種需求的時(shí)候教硫，我第一時(shí)間就想到了必須使用這個(gè)工具叨吮，否則數(shù)據(jù)的龐大和復(fù)雜會(huì)讓我陷入惡夢(mèng)之中。
saga
起初我只是想學(xué)習(xí)調(diào)研一種新的使用redux的方式瞬矩〔杓可是隨著學(xué)習(xí)的深入和使用得越來越多，我對(duì)它越發(fā)著迷景用。saga其實(shí)是redux的一個(gè)中間件涵叮，它提供了非常優(yōu)秀的異步處理方式，就是使用Generator函數(shù)來讓Promise調(diào)用扁平化伞插，像編寫同步代碼一樣編寫異步代碼割粮。其次，saga還提供了很多優(yōu)秀的方法來控制流程媚污，如：fork執(zhí)行一個(gè)非阻塞操作舀瓢；Race 同步執(zhí)行多個(gè) effect，然后一旦有一個(gè)完成耗美，取消其他 effect京髓；takeLatest 意味著我們將執(zhí)行所有操作航缀，然后返回最后一個(gè)(the latest one)調(diào)用的結(jié)果。如果我們觸發(fā)了多個(gè)時(shí)間朵锣，它只關(guān)注最后一個(gè)(the latest one)返回的結(jié)果等谬盐。不僅如此，我從中還摸索到的一種“鎖”的概念（后面會(huì)講到诚些，這種方法對(duì)于 redux化的Stateless Component非常有用飞傀，可以用來模擬生命周期函數(shù)而無需使用高階函數(shù)）。
Seamless-Immutable
Shared mutable state is the root of all evil（共享的可變狀態(tài)是萬惡之源）
-- Pete Hunt
我們都知道react的state是不可變的诬烹，修改state的時(shí)候(特別是引用類型)不能直接使用this.state.foo.bar = newValue砸烦，因?yàn)镽eact的diff算法是shallow eqaul的。我們可以通過cloneDeep來深拷貝原state绞吁，再修改這個(gè)拷貝出來的新值幢痘，再setState。
或者使用Seamless-Immutable來解決這個(gè)問題家破。一個(gè)immutable值一旦生成就不可改變颜说，只要對(duì)這個(gè)值進(jìn)行有副作用的操作都會(huì)生成一個(gè)新的值。同時(shí)Immutable值會(huì)采用結(jié)構(gòu)共享汰聋，即如果對(duì)象樹中一個(gè)節(jié)點(diǎn)發(fā)生變化门粪，只修改這個(gè)節(jié)點(diǎn)和受它影響的父節(jié)點(diǎn)，其它節(jié)點(diǎn)則進(jìn)行共享烹困。這樣也避免了cloneDeep帶來的性能消耗玄妈。如果每次都生成一個(gè)新的對(duì)象，那么就可以把這些對(duì)象存儲(chǔ)下來髓梅，實(shí)現(xiàn)時(shí)間旅行就非常簡單了拟蜻。
Reduxsauce
這個(gè)工具主要是用來簡化reducer的寫法，避免判斷action.type而產(chǎn)生的無數(shù)switch...case...枯饿，以及可以非常輕松地生產(chǎn)出不重復(fù)的action.type等功能酝锅。
if you trade something off, make sure you get something in return.（如果你付出了一些東西，一定要確保你能獲得一些東西）奢方，以上介紹了技術(shù)選型的原因屈张，一定不要為了使用技術(shù)而使用技術(shù)，帶著明確的目標(biāo)袱巨，下面介紹一下這套系統(tǒng)的搭建方法阁谆。
