redux理解
redux理解
1、redux是什麼？
- redux是一個獨立專門用於做狀態管理的Js庫（不是react庫）
- 它可以用在react、angular、vue等項目中，但基本與react配合使用的
- 作用：集中式管理react應用中多個組件共享的狀態
2、什麼情況下需要使用redux？
- 某個組件的狀態，需要分享
- 某個狀態需要任何地方都可以拿到
- 一個組件需要改變全局狀態
- 一個組件需要改變另一個組件的狀態
3、redux的核心API
1）createStore() 創建包含指定reducer的store對象。
關於store對象
- 作用：redux庫核心的管理對象
- 它內部維護着：state、reducer
- 核心方法：getState()、dispatch(action)、subscribr(listener)
2)applyMiddleware()
- 作用：應用在基於redux的中間件（插件庫）
3）combineReducers()
- 作用：合併多個reducer函數
4、redux 概念
- action 標識要執行行爲的對象。包含兩個方面的屬性：type（標識屬性，字符串，唯一，必要）、xxx（數據屬性，任意類型，可選）
- reducer 根據老的state和action，產生新的state的純函數
- store 將state、action與reducer聯繫在一起的對象：getState()得到state、dispatch(action)分發action觸發reducer調用產生新的state、subscribe(listener)註冊監聽當產生了新的state時，自動調用
redux流程圖
react-redux使用
1、理解
- 一個react插件庫
- 專門用來簡化react應用中使用redux
2、react-redux將所有組件分成兩大類
1）ui組件
- 只負責UI的呈現，不帶有任何業務邏輯
- 通過props接收數據
- 不適用任何redux的api
- 一般保存在components文件夾下
2）容器組件：
- 負責管理數據和業務邏輯，不負責UI的呈現
- 適用redux的api
- 一般保存在containers文件夾下
3、相關API
1）Provider：讓所有組件都可以得到state數據
2）connect()：用於包裝UI組件生成容器組件
3）mapStateToprops()：
注意：connect()是一個高階函數，返回的函數是一個高階組件（接受一個UI組件，生成一個容器組件）