ReduxToolkit合并嵌套状态的实用技巧

本文深入探讨了Redux Toolkit中深度合并嵌套状态的实用技巧，旨在解决异步操作后部分更新数据与现有状态合并的难题。针对API仅返回部分更新数据，而需要保留原有状态中未修改字段（如Token）的场景，文章详细阐述了如何利用lodash的`_.merge`方法实现状态的精确更新。通过`createAsyncThunk`处理异步请求，并在`extraReducers`中配置深度合并逻辑，确保关键信息得以保留。本文提供代码示例和实践指导，助您在Redux Toolkit应用中高效、安全地管理复杂嵌套状态，避免数据丢失，提升用户体验。掌握此技巧，能有效应对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 被保留。

注意事项：

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

理论要掌握，实操不能落！以上关于《ReduxToolkit合并嵌套状态的实用技巧》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！