核心概念
三大原則
1、單一資料源
使用redux的程式,所有的state都存儲在一個單一的資料源store内部,類似一個巨大的對象樹。
state是隻讀的
state是隻讀的,能改變state的唯一方式是通過觸發action來修改
2、使用純函數執行修改
為了描述 action 如何改變 state tree , 你需要編寫 reducers。
reducers是一些純函數,接口目前state和action。隻需要根據action,傳回對應的state。而且必須要有傳回。
一個函數的傳回結果隻依賴于它的參數,并且在執行過程裡面沒有副作用,我們就把這個函數叫做純函數
首先需要明白,redux中有方法,這些方法是封裝好的
dispatch 方法是根據動作做派發的過程
getState 方法是傳回目前store中的state的資料
subscribe 方法是事件訂閱,參是一個函數,它有一個數值專門存放函數,當執行對應的事件函數,就會周遊觸發該數組中的函數
1、store中的state資料渲染到目前元件
2、對store中的state的資料進行修改
在目前元件,觸發,目前元件引入的store檔案中的dispatch(派發器,根據傳入的動作做不的行為事件),reducers.js
3、把最新修改的store中的state資料更新到目前,或者說需要更新的元件中去
總體的了解:
目錄結構
阮一峰,對
Redux 介紹
http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html
Redux的特點
- 統一的狀态管理,一個應用中隻有一個倉庫(store)
- 倉庫中管理了一個狀态樹(statetree)
- 倉庫不能直接修改,修改隻能通過派發器(dispatch)派發一個動作(action)
- 更新state的邏輯封裝到reducer中
何時使用redux?
簡單說,如果你的UI層非常簡單,沒有很多互動,Redux 就是不必要的,用了反而增加複雜性。
使用者的使用方式非常簡單
使用者之間沒有協作
不需要與伺服器大量互動,也沒有使用 WebSocket
視圖層(View)隻從單一來源擷取資料
Redux 的适用場景:多互動、多資料源。
使用者的使用方式複雜
不同身份的使用者有不同的使用方式(比如普通使用者和管理者)
多個使用者之間可以協作
與伺服器大量互動,或者使用了WebSocket
View要從多個來源擷取資料
從元件角度看,如果你的應用有以下場景,可以考慮使用 Redux。
某個元件的狀态,需要共享
某個狀态需要在任何地方都可以拿到
一個元件需要改變全局狀态
一個元件需要改變另一個元件的狀态
設計思想
Redux 的設計思想很簡單,就兩句話。
(1)Web 應用是一個狀态機,視圖與狀态是一一對應的。
(2)所有的狀态,儲存在一個對象裡面。
.1State
Store
對象包含所有資料。如果想得到某個時點的資料,就要對 Store 生成快照。這種時點的資料集合,就叫做 State。
目前時刻的 State,可以通過
store.getState()
拿到。
Redux 規定, 一個 State 對應一個 View。隻要 State 相同,View 就相同。你知道 State,就知道 View 是什麼樣,反之亦然。
redux中各對象的說明
store
store是一個資料倉庫,一個應用中store是唯一的,它裡面封裝了state狀态,當使用者想通路state的時候,隻能通過store.getState來取得state對象,而取得的對象是一個store的快照,這樣就把store對象保護起來。
action
action描述了一個更新state的動作,它是一個對象,其中type屬性是必須有的,它指定了某動作和要修改的值:
{type: UPDATE_TITLE_COLOR, payload: 'green'}
actionCreator
如果每次派發動作時都寫上長長的action對象不是很友善,而actionCreator就是建立action對象的一個方法,調用這個方法就能傳回一個action對象,用于簡化代碼。
dispatch
dispatch是一個方法,它用于派發一個動作action,這是唯一的一個能夠修改state的方法,它内部會調用reducer來調用不同的邏輯基于舊的state來更新出一個新的state。
reducer
reducer是更新state的核心,它裡面封裝了更新state的邏輯,reducer由外界提供(封裝業務邏輯,在createStore時傳入),并傳入舊state對象和action,将新值更新到舊的state對象上傳回。