文檔:http://cn.redux.js.org/index.html
三大原則
- 單一數據源 :整個應用的state存儲在一棵object tree中,并且這個 object tree 只存在于唯一一個 store中
- State只讀: 惟一改變 state 的方法就是觸發 action( 是一個用于描述已發生事件的普通對象)
- 使用純函數來執行修改 : 編寫reducer描述如何改變state,Reducer 只是一些純函數,它接收先前的 state 和 action,并返回新的 state
相關學習資料
如果需要關于 Redux 所有內容的列表,推薦移步至 Awesome Redux。它包含了示例、樣板代碼、中間件、工具庫,還有很多其它相關內容。
要想學習 React 和 Redux ,React/Redux Links 包含了教程和不少有用的資源,Redux Ecosystem Links 則列出了 許多 Redux 相關的庫及插件。
基礎
Action
- 是把數據從應用傳到 store 的有效載荷。它是 store 數據的唯一來源。
- action 內必須使用一個字符串類型的 type (被定義成字符串常量)字段來表示將要執行的動作.
- 除了 type 字段外,action 對象的結構完全由你自己決定
- 我們應該盡量減少在 action 中傳遞的數據
Reducer
- Action只是描述有事情發生,Reducer指明如何更新State
- 把所有數據放到一個對象里,每個數據以 ID 為主鍵,不同實體或列表間通過 ID 相互引用數據。把應用的 state 想像成數據庫
永遠不要在 reducer 里做這些操作:
修改傳入參數;
執行有副作用的操作,如 API 請求和路由跳轉;
調用非純函數,如 Date.now() 或 Math.random()
- reducer 一定要保持純凈。只要傳入參數相同,返回計算得到的下一個 state 就一定相同。沒有特殊情況、沒有副作用,沒有 API 請求、沒有變量修改,單純執行計算。
- 不要修改 state, 使用 Object.assign() 新建了一個副本
- 在 default 情況下返回舊的 state
- 考慮reducer拆分,不要處理state放在一個方法里
Store
Store 有以下職責:
維持應用的 state;
提供 getState()
方法獲取 state;提供 dispatch(action)
方法更新 state;通過 subscribe(listener)
注冊監聽器;通過 subscribe(listener)
返回的函數注銷監聽器。關聯Action和Reducer
創建Store:let store = createStore(reducer_name)
數據流
- 嚴格的單向數據流是redux的核心
Redux 生命周期
-
調用 store.dispatch(action)
- store 調用傳入的 reducer 函數
-
根 reducer 應該把多個子 reducer 輸出合并成一個單一的 state 樹 combineReducers()
- ** store 保存了根 reducer 返回的完整 state 樹**
React+Redux
- 想通過 react-redux
提供的 connect()方法將包裝好的組件連接到Redux。盡量只做一個頂層的組件,或者 route 處理。
發現阮一峰老師寫過關于Redux的文章,先收藏下:
Redux 入門教程(一):基本用法
Redux 入門教程(二):中間件與異步操作
Redux 入門教程(三):React-Redux 的用法