Redux Toolkit中深度合并嵌套状态数据的策略-js教程-PHP中文网

Redux Toolkit中深度合并嵌套状态数据的策略

心靈之曲

发布： 2025-10-28 14:37:41

原创

1002人浏览过

Redux Toolkit中深度合并嵌套状态数据的策略

本文探讨了在redux toolkit应用中，如何高效且安全地更新复杂嵌套状态数据。针对异步操作返回部分更新数据时，如何保留现有状态中未修改字段及特定敏感信息（如token）的问题，文章将介绍利用深度合并策略实现精确状态更新的方法，并提供相关代码示例与实践指导。

理解挑战：Redux Toolkit中的复杂状态更新

Redux Toolkit (RTK) 极大地简化了Redux的开发流程，尤其是在状态管理方面。它内置了 Immer 库，使得在 Redux reducer 中可以直接“修改”状态，而 Immer 会在幕后处理不可变更新。然而，当处理包含多层嵌套的复杂状态对象时，如果后端 API 只返回部分更新的数据，我们面临的挑战是如何将这些部分更新的数据智能地合并到现有状态中，同时保留那些未被 API 触及的字段，特别是像用户认证 Token 这样的关键信息。

考虑以下用户数据结构作为初始状态：

// 初始用户数据状态
const initialUserData = {
    "user_profile": {
        "name": "John Doe",
        "Token": "12345678"
    },
    "basic_information": {
        "primary_information": {
            "sex": "MALE",
            "age": 30,
            "photo": "test.png"
        }
    }
};

登录后复制

当调用更新 API 后，API 可能只返回部分更新的数据，例如：

// API返回的部分更新数据
const updatedApiData = {
    "user_profile": {
        "name": "John Test",
    },
    "basic_information": {
        "primary_information": {
            "sex": "FEMALE",
            "age": 27,
        }
    }
};

登录后复制

我们的目标是：将 updatedApiData 合并到 initialUserData 中，使得 name、sex、age 等字段被更新，而 Token 和 photo 等在 updatedApiData 中不存在的字段，则保留 initialUserData 中的原有值。

Redux Toolkit异步操作与Slice配置

在 Redux Toolkit 中，我们通常使用 createAsyncThunk 来处理异步操作，并通过 createSlice 定义状态切片和相关的 reducer。

首先，定义一个 createAsyncThunk 来处理用户信息的更新请求：

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import { commonPutRequest } from './api'; // 假设这是一个通用的PUT请求函数
import _ from 'lodash'; // 引入lodash

export const updatePrimaryInformation = createAsyncThunk(
  "profile/primary_info",
  async (arg, { rejectWithValue }) => {
    const { body, headers } = arg;
    try {
      const updateRequest = await commonPutRequest({
        body,
        headers,
        url: "http://localhost:8000/api/accounts_app/primary_information",
      });
      if (updateRequest) {
        return updateRequest; // API成功返回更新后的数据
      } else {
        throw new Error(updateRequest.message || "更新失败");
      }
    } catch (err) {
      return rejectWithValue(err.message || "网络请求错误");
    }
  }
);

登录后复制

接下来，配置 Redux Slice，包括初始状态、reducer 以及处理 createAsyncThunk 生命周期的 extraReducers：

const initialState = {
    data: {}, // 存储用户数据，初始为空或包含默认值
    loading: "idle", // 'idle' | 'pending' | 'succeeded' | 'failed'
    message: "",
};

const authenticateSlice = createSlice({
    name: "auth",
    initialState,
    reducers: {
        // 其他同步reducer，例如 logoutUser 等
    },
    extraReducers: (builder) => {
        builder
            // ... 处理其他异步操作，如登录、登出等
            // 例如：
            // .addCase(fetchUserLogin.fulfilled, (state, action) => {
            //     state.loading = "succeeded";
            //     state.data = action.payload; // 首次登录时直接赋值
            // })

            // 处理更新操作的pending状态
            .addCase(updatePrimaryInformation.pending, (state) => {
                state.loading = "pending";
            })
            // 处理更新操作的fulfilled状态
            .addCase(updatePrimaryInformation.fulfilled, (state, action) => {
                state.loading = "succeeded";
                // 关键：深度合并新数据到现有状态
                // Immer允许直接修改state，_.merge会修改第一个参数（state.data）
                // action.payload是API返回的部分更新数据
                state.data = _.merge(state.data, action.payload);
            })
            // 处理更新操作的rejected状态
            .addCase(updatePrimaryInformation.rejected, (state, action) => {
                state.loading = "failed";
                state.message = action.payload; // 错误信息
            });
    },
});

export const { /* 导出其他同步action */ } = authenticateSlice.actions;
export default authenticateSlice.reducer;

登录后复制

深度合并策略：解决部分更新问题

在 updatePrimaryInformation.fulfilled 的 reducer 中，直接将 action.payload 赋值给 state.data (state.data = action.payload;) 会导致整个 state.data 被 action.payload 完全覆盖，从而丢失 Token 和 photo 等未在 action.payload 中出现的字段。

为了实现智能合并，我们需要一个能够进行深度合并的工具。lodash 库提供了 _.merge 方法，它能够递归地将源对象的属性合并到目标对象中。

使用 Lodash _.merge

百度文心百中

百度大模型语义搜索体验中心

查看详情

_.merge(object, [sources]) 方法的工作原理是：它会递归地合并源对象 sources 的自有和继承的可枚举字符串键属性到目标对象 object 中。如果属性在目标对象和源对象中都存在，且都是对象，则会递归合并；否则，源对象的属性值会覆盖目标对象的属性值。

在我们的场景中，state.data 是目标对象，代表当前的用户数据状态；action.payload 是源对象，代表 API 返回的部分更新数据。

// 在 extraReducers 中
.addCase(updatePrimaryInformation.fulfilled, (state, action) => {
    state.loading = "succeeded";
    // 使用lodash的merge方法深度合并新数据到现有状态
    // Immer允许我们“直接修改”state对象。
    // _.merge(destination, source) 会将source合并到destination中。
    // 如果action.payload中没有某个字段，该字段将保留state.data中的值。
    // 如果action.payload中有某个字段，该字段将更新为action.payload中的值。
    state.data = _.merge(state.data, action.payload);
})

登录后复制

示例效果：

假设 state.data 初始为：

{
    "user_profile": {
        "name": "John Doe",
        "Token": "12345678"
    },
    "basic_information": {
        "primary_information": {
            "sex": "MALE",
            "age": 30,
            "photo": "test.png"
        }
    }
}

登录后复制

action.payload 为：

{
    "user_profile": {
        "name": "John Test",
    },
    "basic_information": {
        "primary_information": {
            "sex": "FEMALE",
            "age": 27,
        }
    }
}

登录后复制

经过 state.data = _.merge(state.data, action.payload); 操作后，state.data 将变为：

{
    "user_profile": {
        "name": "John Test",   // 更新
        "Token": "12345678"     // 保留
    },
    "basic_information": {
        "primary_information": {
            "sex": "FEMALE",    // 更新
            "age": 27,          // 更新
            "photo": "test.png" // 保留
        }
    }
}

登录后复制

这完美地实现了我们的需求：name、sex、age 被更新，而 Token 和 photo 被保留。

注意事项：

Lodash 依赖引入： 如果项目中尚未安装 lodash，需要先通过 npm install lodash 或 yarn add lodash 进行安装。为了减小打包体积，可以考虑使用 lodash-es 并进行按需导入，例如 import merge from 'lodash-es/merge';。
Immer 的作用： 在 Redux Toolkit 的 createSlice 中，由于 Immer 的存在，我们可以在 reducer 中看似“直接修改”

以上就是Redux Toolkit中深度合并嵌套状态数据的策略的详细内容，更多请关注php中文网其它相关文章！