簡介

狀態管理工具，集中式管理react、vue、angular等應用中多個組件的狀態，是一個庫,使用之后可以清晰的知道應用里發生了什么以及數據是如何修改，如何更新的

在項目中添加 Redux 并不是必須的,根據項目需求選擇是否引入 Redux

三個原則

1.單一數據源 整個應用的 state 被儲存在一棵 object tree 中，并且這個 object tree 只存在于唯一一個 store 中

2.State 是只讀的 唯一改變 state 的方法就是觸發 action，action 是一個用于描述已發生事件的普通對象。

3.使用純函數來執行修改,為了描述 action 如何改變 state tree ，需要編寫 reducers?

三個要素

1.Action（將要發生的操作）

2.Reducer（根據 action 更新 state，是一個純函數）

????????提供 combineReducers(reducers) 函數組合多個 reducer

3.存放 state 數據的 Store（將 action 和 reducer 聯系到一起的對象）

????????提供 getState() 方法獲取 state?

????????通過 subsctibe(listener) 注冊監聽器?

????????通過 subscribr(listener) 返回的函數注銷監聽器

示例代碼

創建一個簡單的 Redux 應用，使用前先引入 Redux

npm install redux -S

使用Action 創建函數

?Action 創建函數，是一個返回 action 的函數

function increment() {return {type: "INCREMENT"}
}

Reducer

有了Action，還需要?Reducer 來執行更新（reducer 不是一個對象，而是一個返回更新后 state 的純函數）

/**
* counters 就是一個 reducer，根據傳入的 action 的 type 不同，返回一個新的 state 數據
*/
// 先初始化 state
const initCounter = 0;
function counters(state = initCounter, action) {switch(action.type) {case 'INCREMENT':return state ++;default:return state;}
}

創建store?存放 state 數據

通過 reducer 創建 store

const { createStore } = require('redux');const store = createStore(counters);

通過 store.dispatch(action) 將 action 發送給 reducer，更新 state

store.dispatch(increment());

查看結果

// 通過 store.getState() 獲取 State 數據
console.log('counters: ', store.getState());   // => counters： 1

?總結

創建一個操作指令 action -> 創建一個 reducer -> 通過 createStore(reducer) 創建一個 store -> 通過 store。dispatch(action) 執行 reducer 中的更新操作，更新 store 中的數據