react中多個頁面,數(shù)據相互依賴reducer問題及解決

更新時間：2025年12月20日 15:52:02 作者：初遇你時動了情

文章介紹了一個電商商品管理頁面的復雜狀態(tài)管理場景,使用useReducer或useImmerReducer來集中管理狀態(tài),避免組件間直接監(jiān)聽,簡化聯(lián)動邏輯,防止死循環(huán),并便于維護和擴展

場景

典型的電商商品管理頁面復雜狀態(tài)場景，涉及多個模塊數(shù)據聯(lián)動、動態(tài)生成 SKU、屬性和額外參數(shù)注入等。關鍵點是避免組件之間直接相互監(jiān)聽，保持邏輯集中化

頁面模塊

基本信息
商品名稱
分類 / 平臺分類
詳細信息（富文本/描述）
規(guī)格名稱、規(guī)格值
SKU 列表：基于規(guī)格動態(tài)生成
SKU 可能包含額外字段（如價格、庫存、額外參數(shù)）
動態(tài)數(shù)據依賴

切換平臺分類 → 獲取動態(tài)屬性、額外參數(shù) → 注入到 SKU

修改規(guī)格名稱 → 重新生成 SKU

核心問題：

SKU 生成依賴規(guī)格數(shù)據、額外參數(shù)
額外參數(shù)依賴平臺分類
數(shù)據變化涉及多個模塊聯(lián)動，容易出現(xiàn)重復計算或死循環(huán)

useReducer（或者 useImmerReducer）比直接在組件里用一堆 useState + useEffect 更適合，原因如下：

集中管理狀態(tài)：所有頁面狀態(tài)都在一個地方管理，組件只負責渲染和觸發(fā)操作。
統(tǒng)一處理聯(lián)動邏輯：SKU 生成、額外參數(shù)注入、動態(tài)屬性拉取都在 reducer 內完成，不會散落在各組件的 useEffect 里。
避免死循環(huán)：不需要組件間相互監(jiān)聽狀態(tài)變化，更新邏輯集中在 reducer 內部。
便于維護和擴展：新增字段或聯(lián)動規(guī)則，只需改 reducer，不用改每個組件

狀態(tài)設計

import { useReducer } from 'react';
import produce from 'immer';

interface ProductState {
  basicInfo: {
    name: string;
    categoryId: number;
    platformCategoryId: number;
    description: string;
  };
  specs: {
    name: string;
    values: string[];
  }[];
  dynamicAttributes: Record<string, any>; // 平臺分類動態(tài)屬性
  extraParams: Record<string, any>;       // 平臺分類額外參數(shù)
  skuList: SKU[];
}

interface SKU {
  id?: string;
  specCombination: string[]; // 每個SKU對應的規(guī)格值組合
  price: number;
  stock: number;
  extraParams?: Record<string, any>;
}

const initialState: ProductState = {
  basicInfo: {
    name: '',
    categoryId: 0,
    platformCategoryId: 0,
    description: ''
  },
  specs: [],
  dynamicAttributes: {},
  extraParams: {},
  skuList: []
};

Reducer 設計（包含聯(lián)動邏輯）

type Action =
  | { type: 'UPDATE_BASIC_INFO'; payload: Partial<ProductState['basicInfo']> }
  | { type: 'UPDATE_SPEC'; payload: { index: number; spec: Partial<ProductState['specs'][0]> } }
  | { type: 'SET_PLATFORM_CATEGORY'; payload: { platformCategoryId: number; dynamicAttributes: any; extraParams: any } }
  | { type: 'UPDATE_SKU'; payload: SKU[] };

function generateSKUList(specs: ProductState['specs'], extraParams: ProductState['extraParams']): SKU[] {
  // 簡化示例：生成規(guī)格組合的笛卡爾積
  if (specs.length === 0) return [];
  
  function cartesian(arrays: string[][]): string[][] {
    return arrays.reduce<string[][]>(
      (a, b) => a.flatMap(d => b.map(e => [...d, e])),
      [[]]
    );
  }

  const specValues = specs.map(s => s.values.length ? s.values : ['']);
  const combinations = cartesian(specValues);

  return combinations.map(comb => ({
    specCombination: comb,
    price: 0,
    stock: 0,
    extraParams: { ...extraParams }
  }));
}

function productReducer(state: ProductState, action: Action): ProductState {
  switch (action.type) {
    case 'UPDATE_BASIC_INFO':
      return { ...state, basicInfo: { ...state.basicInfo, ...action.payload } };

    case 'UPDATE_SPEC':
      return produce(state, draft => {
        draft.specs[action.payload.index] = { ...draft.specs[action.payload.index], ...action.payload.spec };
        draft.skuList = generateSKUList(draft.specs, draft.extraParams);
      });

    case 'SET_PLATFORM_CATEGORY':
      return produce(state, draft => {
        draft.basicInfo.platformCategoryId = action.payload.platformCategoryId;
        draft.dynamicAttributes = action.payload.dynamicAttributes;
        draft.extraParams = action.payload.extraParams;
        draft.skuList = generateSKUList(draft.specs, draft.extraParams);
      });

    case 'UPDATE_SKU':
      return { ...state, skuList: action.payload };

    default:
      return state;
  }
}

自定義 Hook 封裝

export function useProductManager() {
  const [state, dispatch] = useReducer(productReducer, initialState);

  const updateBasicInfo = (payload: Partial<ProductState['basicInfo']>) => {
    dispatch({ type: 'UPDATE_BASIC_INFO', payload });
  };

  const updateSpec = (index: number, spec: Partial<ProductState['specs'][0]>) => {
    dispatch({ type: 'UPDATE_SPEC', payload: { index, spec } });
  };

  const setPlatformCategory = async (platformCategoryId: number) => {
    const dynamicAttributes = await fetchDynamicAttributes(platformCategoryId);
    const extraParams = await fetchExtraParams(platformCategoryId);
    dispatch({
      type: 'SET_PLATFORM_CATEGORY',
      payload: { platformCategoryId, dynamicAttributes, extraParams }
    });
  };

  const updateSKU = (skuList: SKU[]) => {
    dispatch({ type: 'UPDATE_SKU', payload: skuList });
  };

  return { state, updateBasicInfo, updateSpec, setPlatformCategory, updateSKU };
}

組件只調用 updateXXX 或 setPlatformCategory
SKU 聯(lián)動邏輯和額外參數(shù)注入都在 reducer 內完成
避免在組件里寫大量 useEffect

組件使用示例

const ProductPage = () => {
  const { state, updateBasicInfo, updateSpec, setPlatformCategory, updateSKU } = useProductManager();

  return (
    <div>
      <BasicInfoForm info={state.basicInfo} onChange={updateBasicInfo} />
      <SpecsEditor specs={state.specs} onChange={updateSpec} />
      <SKUList skuList={state.skuList} onChange={updateSKU} />
      <PlatformCategorySelector
        selected={state.basicInfo.platformCategoryId}
        onChange={setPlatformCategory}
      />
    </div>
  );
};

各組件只關注自己的 slice 數(shù)據
不用管其他模塊數(shù)據的聯(lián)動
所有復雜聯(lián)動邏輯在 hook/reducer 內集中處理

總結

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

webpack4+react多頁面架構的實現(xiàn)
webpack在單頁面打包上應用廣泛，以create-react-app為首的腳手架眾多。這篇文章主要介紹了webpack4+react多頁面架構的實現(xiàn)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-10-10
ReactJS應用程序中設置Axios攔截器方法demo
這篇文章主要為大家介紹了ReactJS應用程序中設置Axios攔截器方法demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-12-12
React Antd Upload組件上傳多個文件實現(xiàn)方式
為實現(xiàn)多文件上傳,需使用beforeUpload和customRequest替代onChange以避免多次調用問題,并處理文件路徑以兼容Electron不同平臺
2025-08-08
react-router6.x路由配置及導航詳解
這篇文章主要介紹了react-router6.x路由配置及導航,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
React中refs的一些常見用法匯總
Refs是一個獲取 DOM節(jié)點或React元素實例的工具,在React中Refs 提供了一種方式,允許用戶訪問DOM 節(jié)點或者在render方法中創(chuàng)建的React元素,這篇文章主要給大家介紹了關于React中refs的一些常見用法,需要的朋友可以參考下
2021-07-07
React封裝高階組件實現(xiàn)路由權限的控制詳解
這篇文章主要介紹了React封裝高階組件實現(xiàn)路由權限的控制,在React中,為了實現(xiàn)安全可靠的路由權限控制,可以通過多種方式來確保只有經過授權的用戶才能訪問特定路徑下的資源,下面來介紹封裝高階組件控制的方法,需要的朋友可以參考下
2025-02-02
詳解React Angular Vue三大前端技術
當前世界中，技術發(fā)展非常迅速并且變化迅速，開發(fā)者需要更多的開發(fā)工具來解決不同的問題。本文就對于當下主流的前端開發(fā)技術React、Vue、Angular這三個框架做個相對詳盡的探究，目的是為了解開這些前端技術的面紗，看看各自的廬山真面目。
2021-05-05
React immer與Redux Toolkit使用教程詳解
這篇文章主要介紹了React中immer與Redux Toolkit的使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧
2022-10-10
詳解react組件通訊方式(多種)
這篇文章主要介紹了詳解react組件通訊方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-05-05
React Hooks核心原理深入分析講解
這篇文章主要介紹了react hooks實現(xiàn)原理,文中給大家介紹了useState dispatch 函數(shù)如何與其使用的 Function Component 進行綁定，節(jié)后實例代碼給大家介紹的非常詳細，需要的朋友可以參考下
2022-12-12