Redux要解決什么問(wèn)題?

隨著 JavaScript 單頁(yè)應(yīng)用開(kāi)發(fā)日趨復(fù)雜,JavaScript 需要管理比任何時(shí)候都要多的 state (狀態(tài))。 這些 state 可能包括服務(wù)器響應(yīng)、緩存數(shù)據(jù)、本地生成尚未持久化到服務(wù)器的數(shù)據(jù),也包括 UI 狀態(tài),如激活的路由,被選中的標(biāo)簽,是否顯示加載動(dòng)效或者分頁(yè)器等等。
管理不斷變化的 state 非常困難。如果一個(gè) model 的變化會(huì)引起另一個(gè) model 變化,那么當(dāng) view 變化時(shí),就可能引起對(duì)應(yīng) model 以及另一個(gè) model 的變化,依次地,可能會(huì)引起另一個(gè) view 的變化。直至你搞不清楚到底發(fā)生了什么。state 在什么時(shí)候,由于什么原因,如何變化已然不受控制。 當(dāng)系統(tǒng)變得錯(cuò)綜復(fù)雜的時(shí)候,想重現(xiàn)問(wèn)題或者添加新功能就會(huì)變得舉步維艱。
Redux的設(shè)計(jì)借鑒Flux、 Elm、Immutable,它的出現(xiàn)就是為了解決state里的數(shù)據(jù)問(wèn)題。Redux和Flux的主要區(qū)別是Redux里面是單一的數(shù)據(jù)源設(shè)計(jì),而Flux(或者Reflux)里面有多個(gè)數(shù)據(jù)源。

Redux是如何工作的?

我們知道,在React中,數(shù)據(jù)在組件中是單向流動(dòng)的。數(shù)據(jù)從一個(gè)方向父組件流向子組件(通過(guò)props),由于這個(gè)特征,兩個(gè)非父子關(guān)系的組件(或者稱作兄弟組件)之間的通信并不是那么清楚。
React并不建議直接采用組件到組件的通信方式,盡管它有一些特性可以支持這么做(比如先將子組件的值傳遞給父組件,然后再由父組件在分發(fā)給指定的子組件)。這被很多人認(rèn)為是糟糕的實(shí)踐方式,因?yàn)檫@樣的方式容易出錯(cuò)而且會(huì)讓代碼向“拉面”一樣不容易理解。
當(dāng)然React也沒(méi)有直接建議如何去處理這種情形,以下是React的文檔中關(guān)于這部分的描述:

對(duì)于非父子關(guān)系的組件,你可以自己建立一個(gè)全局的事件系統(tǒng),F(xiàn)lux的模式也是一種可行的方式。

Redux的出現(xiàn)就讓這個(gè)問(wèn)題的解決變得更加方便了。Redux提供一種存儲(chǔ)整個(gè)應(yīng)用狀態(tài)到一個(gè)地方的解決方案(可以理解為統(tǒng)一狀態(tài)層),稱為“store”,組件將狀態(tài)的變化轉(zhuǎn)發(fā)通知(dispatch)給store,而不是直接通知其它的組件。組件內(nèi)部依賴的state的變化情況可以通過(guò)訂閱store來(lái)實(shí)現(xiàn)。
使用Redux,所有的組件都從store里面獲取它們依賴的state,同時(shí)也需要將state的變化告知store。組件不需要關(guān)注在這個(gè)store里面其它組件的state的變化情況,Redux讓數(shù)據(jù)流變得更加簡(jiǎn)單。這種思想最初來(lái)自Flux,它是一種和React相同的單向數(shù)據(jù)流的設(shè)計(jì)模式。
大數(shù)據(jù)培訓(xùn),云培訓(xùn),數(shù)據(jù)挖掘培訓(xùn),云計(jì)算培訓(xùn),高端軟件開(kāi)發(fā)培訓(xùn),項(xiàng)目經(jīng)理培訓(xùn)

延伸閱讀

學(xué)習(xí)是年輕人改變自己的最好方式-Java培訓(xùn),做最負(fù)責(zé)任的教育,學(xué)習(xí)改變命運(yùn),軟件學(xué)習(xí),再就業(yè),大學(xué)生如何就業(yè),幫大學(xué)生找到好工作,lphotoshop培訓(xùn),電腦培訓(xùn),電腦維修培訓(xùn),移動(dòng)軟件開(kāi)發(fā)培訓(xùn),網(wǎng)站設(shè)計(jì)培訓(xùn),網(wǎng)站建設(shè)培訓(xùn)學(xué)習(xí)是年輕人改變自己的最好方式