React-10:Redux狀態管理庫(數據)

redux

        強調的是,redux 與 react 並沒有直接關係,它是一個獨立的 JavaScript 狀態管理庫(數據),如果我們希望中 React 中使用 Redux,需要先安裝 react-redux

知識點

        - 狀態管理器

        - state 對象

        - reducer 純函數

        - store 對象

        - action 對象

        - combineReducers 方法

        - react-redux

        - provider 組件

        - connect 方法

        - Redux DevTools extension 工具

        - 中間件 - middleware

        - redux-chunk


狀態(數據)管理

        前端應用越來越複雜,要管理和維護的數據也越來越多,爲了有效的管理和維護應用中的各種數據,我們必須有一種強大而有效的

        數據管理機制,也稱爲狀態管理機制,Redux 就是解決該問題的

Redux

        Redux 是一個獨立的 JavaScript 狀態管理庫,與非 React 內容之一

                https://www.bootcdn.cn/redux/

核心概念

        理解 Redux 核心幾個概念與它們之間的關係

                - state

                - reducer

                - store

                - action

state 對象

        通常我們會把應用中的數據存儲到一個對象樹(Object Tree) 中進行統一管理,我們把這個對象樹稱爲:state

state 是隻讀的

        這裏需要注意的是,爲了保證數據狀態的可維護和測試,不推薦直接修改 state 中的原數據

通過純函數修改 state

        什麼是純函數?

純函數    (Reducer

        1. 相同的輸入永遠返回相同的輸出

        2. 不修改函數的輸入值

        3. 不依賴外部環境狀態

        4. 無任何副作用

使用純函數的好處    (特別單純,裏面沒有可變的東西)

        1. 便於測試

        2. 有利重構

Reducer 函數

上面的 todo 函數就是 Reducer 函數

        1. 第一個參數是原 state 對象

        2. Reducer 函數不能修改原 state,而應該返回一個新的 state

        3. 第二參數是一個 action 對象,包含要執行的操作和數據

        4. 如果沒有操作匹配,則返回原 state 對象


action 對象

        我們對 state 的修改是通過 reducer 純函數來進行的,同時通過傳入的 action 來執行具體的操作,action 是一個對象

                - type 屬性 : 表示要進行操作的動作類型,增刪改查……

                - payload屬性 : 操作 state 的同時傳入的數據

        但是這裏需要注意的是,我們不直接去調用 Reducer 函數,而是通過 Store 對象提供的 dispatch 方法來調用

Store 對象

        爲了對 state,Reducer,action 進行統一管理和維護,我們需要創建一個 Store 對象

Redux.createStore 方法

let store = Redux.createStore((state, action) => {

  // ...

}, []);

todo

        用戶操作數據的 reducer 函數

[    ]

        初始化的 state

        我們也可以使用 es6 的函數參數默認值來對 state 進行初始化

let store = Redux.createStore( (state = [], action) => {

  // ...

} )

getState() 方法

        通過 getState 方法,可以獲取 Store 中的 state

dispatch() 方法

        通過 dispatch 方法,可以提交更改,相當於打補丁,可以對store裏的數據進行修改


action 創建函數

        action 是一個對象,用來在 dispatch 的時候傳遞動作和數據,我們在實際業務中可能會中許多不同的地方進行同樣的操作,

        這個時候,我們可以創建一個函數用來生成(返回)action


subscribe() 方法    (可以用於react監聽)

        可以通過 subscribe 方法註冊監聽器(類似事件),每次 dispatch action 的時候都會執行監聽函數,該方法返回一個函數,

        通過該函數可以取消當前監聽器

Redux 工作流


Reducers 分拆與融合

        當一個應用比較複雜的時候,狀態數據也會比較多,如果所有狀態都是通過一個 Reducer 來進行修改的話,那麼這個 Reducer 

        就會變得特別複雜。這個時候,我們就會對這個 Reducer 進行必要的拆分

        我們把上面的 users、items、cart 進行分拆

combineReducers 方法

        該方法的作用是可以把多個 reducer 函數合併成一個 reducer

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章