Redux由Dan Abramov在2015年創建的科技術語。是受2014年Facebook的Flux架構以及函數式編程語言Elm啟發。Redux因其簡單易學體積小在短時間內成為熱門的前端架構。
軟件簡介
Redux對于ECMAScript應用而言是一個可預測狀態的容器。換言之,它是一個應用數據流框架,而不是傳統的像underscore.js或者AngularJS那樣的庫或者框架。
Redux最主要是用作應用狀態的管理。簡言之,Redux用一個單獨的常量狀態樹(對象)保存這一整個應用的狀態,這個對象不能直接被改變。當一些數據變化了,一個新的對象就會被創建(使用actions和reducers)。
Redux和Flux很像。主要區別在于Flux有多個可以改變應用狀態的store,它通過事件來觸發這些變化。組件可以訂閱這些事件來和當前狀態同步。Redux沒有分發器dispatcher,但在Flux中dispatcher被用來傳遞數據到注冊的回調事件。另一個不同是Flux中有很多擴展是可用的,這也帶來了一些混亂與矛盾。
通常認為Redux只能與React或React Native一起使用,但事實上它可以與許多其他框架一起使用,如AngularJS、Vue.js、Polymer、Ember、Backbone.js等。這種靈活性使得Redux能夠在不同的項目和技術棧中發揮作用,為開發者提供了一個統一的狀態管理解決方案。
發展歷程
Redux是由Dan Abramov和Andrew Clark于2015年創建的。Abramov在準備React Europe會議上的熱重新加載演講時開始編寫第一個Redux實現。他試圖制作一個可以更改邏輯的f.lux概念驗證,它可以讓他進行時間旅行,可以讓他在代碼更改時重新應用未來的操作。他被Flux模式與減少函數的相似性所震驚,并考慮如果Flux存儲不是存儲而是一個減少函數會怎樣。他聯系了Andrew Clark(Flummox的Flux實現作者)作為合作者,Clark幫助構建了一個連貫的API,并實現了中間件和存儲增強等擴展點。自2016年中期以來,主要的維護者是Mark Erikson和Tim Dorr。2019年2月,useReducer作為React 16.8版本中的一個hook引入,提供了與Redux一致的API,使開發人員能夠創建類似Redux的本地組件狀態存儲。
功能和服務
預測
始終有一個準確的數據源,就是store, 對于如何將actions以及應用的其他部分和當前的狀態同步可以做到絕不混亂。
維護
具備可預測結果的性質和嚴格的組織結構讓代碼更容易維護。
組織
對代碼應該如何組織更加嚴苛,這使代碼更加一致,對團隊協作更加容易。
測試
編寫可測試代碼的首要準則就是編寫可以僅做一件事并且獨立的小函數。Redux的代碼幾乎全部都是這樣的函數:短小、純粹、分離。
服務端渲染
可以帶來更好的用戶體驗并且有助于搜索引擎優化,尤其是對于首次渲染。僅僅是把服務端創建的store傳遞給客戶端就可以。
開發者工具
開發者可以實時跟蹤在應用中正在發生的一切,從actions到狀態的改變。
社區與生態圈
存在很多支持Redux的社區,使它能夠吸引更多的人來使用。
Actions
簡單地,Actions就是事件。Actions傳遞來自這個應用(用戶接口,內部事件比如API調用和表單提交)的數據給store。store只獲取來自Actions的信息。內部Actions就是簡單的具有一個type屬性(通常是常量)的ECMAScript對象,這個對象描述了action的類型以及傳遞給store的負載信息。
Actions通過action生成器創建,它們僅僅是是返回action的函數。
要在應用中的任何地方調用actions很容易,使用dispatch方法。
Reducers
在函數式JavaScript中reducer基于數組reduce方法,接收一個回調(reducer)讓你從多個值中獲得單個值,整數和,或者一個一系列值的累積。在Redux中,reducer就是獲得這個應用的當前狀態和事件然后返回一個新狀態的函數。理解reducer是怎樣工作的至關重要,因為它們完成大部分工作。這是一個非常簡單的reducer,通過獲取當前state和一個action作為參數,再返回下一個state:
對于更多復雜的項目,使用Redux提供的combineReducers()實例是必要的(推薦)。它把在這個應用中所有的reducer結合在一起成為單個索引reducer。每一個reducer負責它自己那部分應用的狀態,這個狀態參數和其他reducer的不一樣。combineReducers()實例使文件結構更容易維護。
如果一個對象(state)只改變一些值,Redux就創建一個新的對象,那些沒有改變的值將會指向舊的對象而且新的值將會被創建。這對性能是極好的。為了讓它更有效率你可以添加 Immutable.js
Store
Store對象保存應用的狀態并提供一些幫助方法來存取狀態,分發狀態以及注冊監聽。全部state由一個store來表示。任何action通過reducer返回一個新的狀態對象。這就使得Redux非常簡單以及可預測。
參考資料 >