說到redux可能我們都先知道了react,但我發現,關於react相關的學習資料很多,也有各種各樣的種類,但是關於redux簡單易懂的資料卻比較少。
這里記錄一下自己的學習理解,希望可以簡潔易懂,入門redux。
一步步的走近redux,可以先從了解flux出發。
Why Redux?
flux是Facebook的一個用來構建客戶端應用的應用程序架構。那么為什么會有flux呢?我們先看一下傳統的應用程序架構MVC架構:
1) Templates / html = View 2) 填充視圖的數據 = Models 3) 檢索數據的邏輯, 整合view層響應事件等一系列應用的邏輯處理 = Controller
當MVC架構的應用程序逐漸變得復雜的時候我們想理清邏輯解決問題會變得有些挑戰。因為有可能一個View層可能跟多個Model有關,Model也有可能跟別的Model相關,這就使數據可能來自很多地方,同時可能改變了不同的model或view。漸漸的應用程序就變得不可控了。更多MVC模式相關的內容可以參考:[談談MVC模式](http://www.ruanyifeng.com/blog/2007/11/mvc.html)
Facebook想借助flux,並結合專注於view層的react來搭建客戶端的應用程序,作為一種新的應用程序的架構。它比MVC更加的[簡單和清晰]
更多flux相關的內容可以看這里 [Flux 官方文檔] [Flux架構入門教程]
其實Redux也是做差不多相同的事情的。那么為什么會有redux呢?redux的作者在使用flux的時候,發現了改進flux架構的可能,想要開發一個更好的開發者工具,同時也能享受到flux的優點。redux的作者是這樣說的:
I didn't actually intend Redux to become a popular Flux library—I wrote it as I was working on my ReactEurope talk on hot reloading with time travel.
這里面提到的代碼熱替換和時間旅行的功能,想要在flux中實現或許比較困難,於是就有了redux。
上面是我的理解,我們也可以更加直觀的看看redux的作者給出的相關回答:
[http://stackoverflow.com/questions/32461229/why-use-redux-over-facebook-flux#answer-32920459]
Redux中的關鍵部件
在我們還沒開始使用Redux構建我們的應用程序之前,先了解一下Redux中的一些關鍵概念和部件,有助於我們理解redux,這些部件串聯起來了redux的工作流程。
基本上有這三個關鍵概念:
Store
Redux的官方介紹是這個樣子的:
Redux is a predictable state container for JavaScript apps.(Redux 是 JavaScript 狀態容器,提供可預測化的狀態管理。)
也就是說, 一個Redex的實例就叫做store,可以被這樣創建:
import { createStore } from 'redux'
var store = createStore(reducers)
在Redux中,應用程序只能擁有一個state,用來保存整個應用程序的state。然后通過以根Reducer為首的Reducers們來處理應用程序中哪一個部分的state需要更新。
可見,store是個靈魂人物,他做的主要事情可以歸納一下,主要有這幾個:
- 管理整個應用程序的狀態;
- 可以通過`store.getState()`來獲取應用程序當前的狀態;
- 通過`store.dispatch(action)`來更新應用程序的狀態;
- 可以訂閱應用程序狀態的改變,來做些view層的改變:
store.subscribe(function() { console.log('store has been updated. Latest store state:', store.getState()); // Update your views here })
Action creators
Actions是一個普通的對象,用來描述應用程序中發生的某件事情,它是應用程序中可以用來描述數據變化的唯一角色。
actionCreator 是一個函數,用來創建一個action:
var actionCreator = function() { return { type: 'AN_ACTION' } }
創建的action被store分發:
store_0.dispatch({ type: 'AN_ACTION' })
更多的關於action和action creator相關內容可以參考:[Reducing Boilerplate]
Reducers
Actions用來告訴我們應用程序中有某件事情發生了,但是並不會告訴store這些改變改如何響應,也不會改變store。這就是Reducers的工作。
import { createStore } from 'redux' var reducer = function (...args) { console.log('Reducer was called with args', args) } var store = createStore(reducer)
這里的reducer也就是根reducer,但我們可以有多個reducer,他們分別只處理一部分的state。然后通過combineReducers組成根reducer用來創建一個store, 比如:
var userReducer = function (state = {}, action) { // etc. } var itemsReducer = function (state = [], action) { // etc. } var reducer = combineReducers({ user: userReducer, items: itemsReducer })
Redux 的核心思想之一就是,它不直接修改整個應用的狀態樹,而是將狀態樹的每一部分進行拷貝並修改拷貝后的部分,然后將這些部分重新組合成一顆新的狀態樹。
也就是說,子 reducers 會把他們創建的副本傳回給根 reducer,而根 reducer 會把這些副本組合起來形成一顆新的狀態樹。最后根 reducer 將新的狀態樹傳回給 store,store 再將新的狀態樹設為最終的狀態。
Redux是如何工作的
其實總結一下,Redux為我們所做的事情大概就是這幾個:
1) 一個存放應用程序狀態的地方;
2)一個機制去分發actions並且修改應用程序的state;
3) 一個可以訂閱state更新的機制;
整個系統的流程從產生了一個action開始。用戶在我們的應用程序中產生了交互,我們需要對它的操作進行響應,我們搞清楚了這時候redux中的數據流動過程就會明白它的工作流程了。
小結
當然Redux可以跟任何庫搭檔使用,但分明跟React才是天生一對。
至此,Redux也入了個門了。
邁入下一階段就嚴重建議觀看:[Getting Started Width Redux]