Redux的整個工作流
1 用戶(操作View) 發出action,發出方就用到了dispatch方法
2 然後,Store自動調用Reducer,並且傳入兩個參數(當前State和收到的Action), Reducer會返回新的State,如果有Middleware,Store會將當前State和收到的Action傳遞給Middleware, Middleware會調用Reducer然後返回新的State;
3 State一旦有變化,Store就會調用監聽函數,來更新View
到這兒爲止,一次用戶交互流程結束.可以看到,在整個流程中數據都是單向流動的
Redux只有一個單一的store和一個根級的reduce函數(reducer), 隨着應用的不斷壯大,我們需要將根級的reducer拆分成多個小的reducers,分別獨立地操作state樹的不同部門,而不是添加新的stores
Redux的三個基本原則:
1 單一數據源: 整個應用的state被儲存在一棵object tree中,並且這個object tree只存在於唯一一個store中
2 State是隻讀的,唯一改變state的方法就是觸發action, action是一個用於描述已發生事件的普通對象
3 使用純函數來執行修改: 爲了描述action如何改變state tree, 你需要編寫reducers
Redux有哪幾部分構成?
1 action:action就是一個描述發生什麼的對象
2 reducer:形式爲(state,action) => state的純函數,功能是根據action修改state 將其轉變成下一個state
3 store: 用於存儲state, 你可以把它看成一個容器,.整個應用只能有一個store
總結: Redux應用中所有的state都以一個對象樹形式儲存在一個單一的store中,唯一改變state的辦法是觸發action, action就是一個描述發生什麼的對象.爲了描述action如何改變state樹, 你需要編寫reducers.
action:
Action本質上是一個普通的javaScript對象,action內必須使用一個字符串類型的type字段來表示將要執行
的動作,除了type字段外,action對象的結構完全由你自己定義.多數情況下,type會被定義成字符串常量,當應用規模越來越大時候
建議使用單獨的模塊或者文件來存放action
Action創建函數
Action創建函數,就是生成action的方法. action和action創建函數這兩個概念是不同的, 在Redux中的action創建函數只是簡單的返回一個action
function addTodo(text) {
return {
type: ADD_TODO,
text
}
}
這樣做將使action創建函數更容易被移植和測試
reducer:
reducer是根據action修改state將其轉變成下一個state,記住actions只是描述了有事情發生了這一事實,並沒有描述應用如何更新state
(previousState,aciton) => newState
保持reducer純淨非常重要,永遠不要在reducer裏做這些操作
1 修改傳入參數
2 執行有副作用的操作,如API請求和路由跳轉
3 調用非純函數,如Date.now()或Math.random()
提示: reducer是純函數,它僅僅作用於計算下一個state, 它應該是完全可預測的,多次傳入相同的輸入必須產生相同的輸出, 它不應該有副作用的產出,如API調用或路由跳轉, 這些應該在dispatch action前發生
合併和拆分reducer顯得很重要, 這時候就要用到 combineReducers()這個函數了
Store
是存儲state的容器, Store會把兩個參數(當前的state樹和action)傳入reducer