用 Redux 做狀態管理，真的很簡單！

作者：小東 2022-03-04 17:21:29

開發前端

本文通過實際案例反向釋義 Redux 中的名詞概念，同時借助 @reduxjs/toolkit 模塊簡化 Redux 的使用，希望通過今天的分享可以幫助大家打開心結，抱抱 Redux。

最近在某項目中欲選一工具用作項目的全局狀態管理，通過綜合比較考慮，最終選擇了 Redux。都說 Redux 難上手，今天通過 1 個案例， 3 個函數幫小伙伴們快速掌握并實踐生產!

作為一名前端工程師，不少小伙伴對于 Redux 的概念、使用可能還是比較模糊，上手使用的心智負擔也比較重!

但通過調研，目前 Redux 的生態可以說是非常豐富，這也使得將其引入作為項目的狀態管理工具庫變得更加容易。

本文通過實際案例反向釋義 Redux 中的名詞概念，同時借助 @reduxjs/toolkit 模塊簡化 Redux 的使用，希望通過今天的分享可以幫助大家打開心結，抱抱 Redux，提升工作效率，從此不加班!

一、Redux 基礎

一開始就闡釋概念名詞，可能會增加大家上手的難度，因此該部分只對 Redux 做最基本的一個認識。

1、什么是 Redux ?

Redux 是 JavaScript 狀態容器，提供可預測、可調試、集中式的狀態管理。

2、特點

可預測： 讓你開發出行為穩定可預測、可運行在不同環境 (客戶端、服務端和原生程序)、且易于測試的應用。
集中管理： 集中管理應用的狀態和邏輯可以讓你開發出強大的功能，如撤銷/重做、狀態持久化等等。
可調試： Redux DevTools 讓你輕松追蹤到應用的狀態在何時、何處以及如何改變。Redux 的架構會記下每一次改變，借助于 "時間旅行調試"，你甚至可以把完整的錯誤報告發送給服務器。
靈活： Redux 可與任何 UI 層框架搭配使用，它體小精干(只有 2kB，包括依賴)，并且有龐大的插件生態來實現你的需求。

3、設計思想

Redux 既然是狀態管理庫，那么接下來掌握一下基本的數據流概念和原則。

(1) 單一數據源

整個應用的全局 state 被儲存在一棵對象樹(object tree)中，并且這個對象樹只存在于唯一 Store(存儲) 中。

單一數據源使得同構應用開發變得容易，將狀態在統一的對象樹中維護管理也會更加容易!

(2) 單向數據流(one-way data flow)

Redux 單向數據流

用 state 來描述應用程序在特定時間點的狀況。
基于 state 來渲染出 View。
當發生某些事情時(例如用戶單擊按鈕)，state 會根據發生的事情進行更新，生成新的 state。
基于新的 state 重新渲染 View。

(3) 不可變性(Immutability)

對于狀態(state)的描述一般都是一個大的 JavaScript 對象(Object Tree)，例如：

const state = {
    isLoading: true,
    userInfo: {
        uid: 1,
        wechat: 'DYBOY2020',
        phone: 177****7777,
        history: [1,2,3,4,5]
    }
}

由于 JS 的動態性，使得對象是可以修改的，Redux 想要記錄每一個狀態，如果直接修改 state 中的引用類型屬性，勢必會導致 state 的變化不可追溯和預測。

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

Redux 期望所有狀態更新都是使用不可變的方式，因此，每一次的 state 變更，不會修改原對象，而是修改前一個狀態(state)的克隆對象，以此來保證不可變性和正確性，同時記錄每一次變化的 state。

(4) 純函數更新 state

純函數： 相同的輸入，總是會得到相同的輸出，并且在執行過程中沒有任何副作用的函數。

為了保證數據的改變正確性，以及滿足 state 不可變性的要求，因此引入了純函數作為更新狀態的唯一方式。

React Hooks 的狀態管理就融合了 Redux 的設計思想，畢竟把 Redux 的作者 Dan Abramov 都直接挖過去了!

二、案例實踐

下面講講如何接入一個全新的項目中，以 create-react-app[1] 腳手架創建的項目為例子。

借助 @redux/toolkit，不再需要刻意關心如何組織編寫 Reducer、Action creator、Action Type 等內容，同時，默認就融合支持異步 Thunks。

再結合 React 16.x 中的 Hooks，使用 useSelector()、useDispatch() 在任意組件中消費 Store。

1、初始化項目

首先是借助 create-react-app 初始化一個 TS + React 環境的項目。

npx create-react-app craapp --template typescript

2、安裝 Redux 相關依賴

yarn add redux react-redux @reduxjs/toolkit

redux: 核心狀態管理庫。
react-redux: 用于 React 框架的橋接層。
@reduxjs/toolkit: 降低 Redux 使用難度的助手。

3、全局 Store 的創建

所有的狀態都放在了 Store 中，因此需要一個統一的地方來管理，以一個計數器為例，在 ./src/store 下的文件結構如下：

.
├── index.ts // store 實例，導出 state 和 dispatch 類型
└── reducers // 集合所有的 reducer
    ├── counter.ts // 用于計數器的 reducer、action、selector
    └── index.ts // 導出 rootReducers，用于整合所有的 reducer

(1) store/index.ts

import { configureStore } from "@reduxjs/toolkit";
import rootReducers from "./reducers"; // 引入 reducer 的集合
// 實例化 store，全局唯一
const store = configureStore({
  reducer: rootReducers,
});
// 導出 Store 中的狀態（state）類型
export type RootState = ReturnType<typeof store.getState>;
// 導出更改狀態的 Dispatch 方法類型
export type AppDispatch = typeof store.dispatch;
// 默認導出 store，用于全局的 Provieder 消費
export default store;

(2) store/reducers/index.ts

import {combineReducers} from '@reduxjs/toolkit'
import counterSlice from './counter' // 可以引入各種 reducer
const rootReducers = combineReducers({
  counter: counterSlice // 這里通過 MAP 形式，自定義不同 reducer 的“命名空間”
  // ... 可以在這里擴展添加任意的 reducer
})
// 默認導出，給 configureStore 消費
export default rootReducers

(3) store/reducers/counter.ts

接下來看看怎么便捷的創建一個 Reducer，以前使用 Redux 總是需要手動創建多個文件，reducer、action、action creator，但現在可以直接借助 @redux/toolkit 統一的放在一個文件中，結構化的去描述 Redux 中的 action 和 redcuer。

import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import { AppDispatch, RootState } from ".."; // 在 store/index.ts 中聲明的類型
// 借助 createSlice 創建 reducer、action
const CounterSlice = createSlice({
  name: "counter", // 生成 Action type 的前綴，例如：counter/increment
  initialState: {
    value: 0,
  },
  reducers: {
    increment: (state) => {
      state.value += 1; // 這里默認通過了 immer 處理，不會修改原 state
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action: PayloadAction<number>) => {
      state.value += action.payload;
    },
    decrementByAmount: (state, action: PayloadAction<number>) => {
      state.value -= action.payload;
    },
  },
});
// Action Creator 用于執行返回描述如何更新 state 的 Action
export const { increment, decrement, incrementByAmount, decrementByAmount } =
  CounterSlice.actions;
// 異步 thunk，用于需要在更新數據前異步處理數據的情況
export const incrementAsync = (amount: number) => (dispatch: AppDispatch) => {
  setTimeout(() => {
    dispatch(incrementByAmount(amount));
  }, 1500);
};
// Selector，作為 useSelector 讀取數據的函數參數
export const counterSelector = (state: RootState) => state.counter.value;

// Reducer，真正執行修改 state 的純函數
export default CounterSlice.reducer;

如上的寫法可以作為一種“模板”，毋須關心各種概念之間的組合，直接用就可以了!

console.log(CounterSlice)
/*
output:
{
  name: 'counter',
  actions : {
    increment,
    decrement,
    incrementByAmount,
    decrementByAmount
  },
  reducer
}
*/

上述 actions 中的函數就是 Action creator，例如執行 increment() 返回的就是：

{type: 'counter/increment'}

執行 incrementByAmount(5) 返回的是：

{type: 'counter/incrementByAmount', payload: 5}

4、組件中讀寫 Stoe

首先是需要將 Store 實例綁定到我們的應用上。

在 ./src/index.tsx 中添加如下：

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux"; // 引入 Provider，綁定 store 到應用上
import store from "./store"; // 引入 store 實例
import App from "./App";
import "./index.css";
ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}> {/* 綁定 store */}
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);

結合 react-redux 提供的 useSelector() 和 useDispatch() 可以在我們自定義的 Counter 組件中消費 counter 狀態(數據)。

//文件位置：src/pages/counter/index.tsx
import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { decrement, incrementAsync, counterSelector } from "@/store/reducers/counter";
import "./index.scss";
const CounterPage = () => {
  const count = useSelector(counterSelector) // 讀取 count 值
  const dispatch = useDispatch() // 獲得 dispatch，結合 action 就可更新 state
  return (
    <div className="counter-page">
      <div className="counter">
        {/* 同步 - */}
        <div className="btn" onClick={() => dispatch(decrement())}>
          -
        </div>
        <div className="val">{`${count}`}</div>
        {/* 異步 + */}
        <div className="btn" onClick={() => dispatch(incrementAsync(5))}>
          +
        </div>
      </div>
    </div>
  );
};

export default CounterPage;

實際效果：

計時器效果演示

縱觀整個案例，相較于不使用 @redux/toolkit 顯著提升了研發的效率，降低了研發的使用心智負擔!

三、擴展知識

1、 @redux/toolkit API

在上述的實際案例中，用到了如下 API：

configureStore(): 簡化 Store 的創建，默認創建了執行異步的中間件，自動啟用 redux devtool。
combineReducers(): 簡化合并 reducer 的操作，并自動注入 state 和 action。
createSlice(): 簡化并統一創建 action creator、reducer。

上述仨 API 可以滿足大部分的場景，在此工具輔助下，極大程度上減少了 TypeScript 類型定義的工作。

當然，想要了解更多關于 @redux/toolkit 便捷的 API，推薦閱讀官方文檔：

@redux/tookit 的 API 使用手冊[2]。
@redux/tookit 的 API 使用手冊 —— TypeScript 類型相關[3]。

2、 Redux 的狀態變更

如果對 Redux 的狀態更新過程和原理感興趣，這里十分推薦閱讀：

Redux如何實現state變化觸發頁面渲染?[4]。

3、 Redux 的同步和異步數據流

同步數據流：

Redux 的同步數據流動圖鏈接：https://umapu.cn/imgs/202203/8c767817cfd66ba6c45276c52e98c8b2.gif。

異步數據流：

Redux 的異步數據流動圖鏈接：https://umapu.cn/imgs/202203/e7edf1f729772323b2aebaae824716eb.gif。

四、總結

React 項目選擇 Redux 作為全局的狀態管理還是非常推薦的，結合 React 16.x 的 Hooks 狀態更新，非常方便，也符合函數組件的編碼風格，再瞅瞅 React 的 useContext 和 useReducer，是不是會有一種 React 和 Redux 就是倆親兄弟的感覺?

簡單總結一下：

推薦在 React 項目中使用 Redux 作為狀態管理。
需要掌握 Redux 中的設計思想。
推薦使用 @redux-toolkit，可降低心智負擔，顯著提升研發效率。
當掌握 @redux-toolkit 后，可補充閱讀 Redux 原本的 API，思考一下為什么 @redux-toolkit 要這么做?

參考資料

[1]create-react-app: https://create-react-app.dev。

[2]@redux/tookit 的 API 使用手冊: https://redux-toolkit.js.org/usage/usage-guide。

[3]@redux/tookit 的 API 使用手冊 —— TypeScript 類型相關: https://redux-toolkit.js.org/usage/usage-with-typescript。

[4]Redux如何實現state變化觸發頁面渲染?: https://juejin.cn/post/6945808822308962317。

責任編輯：姜華來源： DYBOY

Redux 項目前端