在Redux Toolkit中实现跨切片初始状态的有效共享

本文详细介绍了在Redux Toolkit应用中，如何将一个Redux切片（slice）的初始状态值作为另一个切片的初始状态。针对直接访问`slice.initialState`可能导致`undefined`的问题，文章阐明了`createSlice`返回对象的结构，并重点推荐使用`slice.getInitialState()`方法来安全、准确地获取切片的初始状态，确保数据依赖关系的正确初始化，并提供了详细的代码示例和最佳实践建议。

引言：跨切片初始状态共享的必要性

在大型Redux应用中，切片（slice）之间经常存在数据依赖关系。有时，一个切片的初始状态需要依赖于另一个切片已经定义的初始值。例如，购物车切片（cartSlice）的初始用户可能需要从用户切片（userSlice）的初始状态中获取。直接在createSlice的initialState定义中引用其他切片的值似乎是直观的做法，但如果方法不当，可能会遇到undefined的问题。本教程将深入探讨如何在Redux Toolkit中正确实现这种跨切片初始状态的共享。

Redux Toolkit createSlice 返回值解析

@reduxjs/toolkit 提供的 createSlice 函数是构建Redux切片的核心工具。它简化了Redux的配置和开发。了解 createSlice 的返回值是解决跨切片初始状态问题的关键。

createSlice 函数并不仅仅返回一个包含状态和reducer的对象。它的实际返回值是一个结构化的对象，包含以下关键属性：

{
    name: string,             // 切片的名称
    reducer: ReducerFunction, // 根reducer
    actions: Record<string, ActionCreator>, // 包含所有action creator的对象
    caseReducers: Record<string, CaseReducer>, // 包含所有case reducer的对象
    getInitialState: () => State // 一个函数，用于获取切片的初始状态
}

其中，getInitialState 方法是本文解决方案的核心。它是一个函数，调用后会返回该切片定义的完整初始状态。

问题分析：为何直接访问 slice.initialState 失败

在上述问题中，开发者尝试通过 userSlice?.initialState?.userName 来获取 userName。这种做法之所以失败，是因为 userSlice（即 createSlice 的返回值）对象本身并没有一个名为 initialState 的直接属性来存储最终的、已解析的初始状态值。initialState 是作为参数传递给 createSlice 的，而不是作为其返回对象的公共属性暴露的。因此，尝试访问 userSlice.initialState 会得到 undefined，进而导致 userSlice.initialState.userName 也是 undefined。

解决方案：使用 getInitialState() 方法

正确获取其他切片初始状态的方法是利用 createSlice 返回对象提供的 getInitialState() 方法。这个方法专门用于返回切片定义时的初始状态。

让我们看看如何修正 cartSlice 的定义。

有道小P

有道小P，新一代AI全科学习助手，在学习中遇到任何问题都可以问我。

64

查看详情

userSlice.js 示例代码（保持不变）

首先，这是我们作为数据源的 userSlice：

// userSlice.js
import { createSlice } from '@reduxjs/toolkit';

const userNameLocalStorage =
    localStorage.getItem("userRedux") === null
        ? null
        : JSON.parse(localStorage.getItem("userRedux"));

const initialState = {
    userName: userNameLocalStorage,
};

export const userSlice = createSlice({
    name: 'users',
    initialState,
    reducers: {
        updateUser: (state, action) => {
            localStorage.setItem("userRedux", JSON.stringify(action.payload)); // 确保存储的是字符串
            state.userName = action.payload;
        },
        logOut: (state) => {
            window.localStorage.removeItem('userRedux');
            state.userName = null;
        },
    },
});

export const { updateUser, logOut } = userSlice.actions;

export default userSlice.reducer;

cartSlice.js 示例代码（修正后）

现在，我们将 cartSlice 中的 user 属性的初始值修改为通过 userSlice.getInitialState().userName 获取：

// cartSlice.js
import { createSlice } from '@reduxjs/toolkit';
// 导入 userSlice 对象本身，而不是其reducer
import { userSlice } from './userSlice'; 

// 正确地获取 userSlice 的初始状态
const userInitialState = userSlice.getInitialState();

const initialState = {
    numberOfItems: 0,
    details: [],
    total: 0,
    // 从 userSlice 的初始状态中获取 userName
    user: userInitialState.userName, 
};

const cartSlice = createSlice({
    name: 'cart',
    initialState,
    reducers: {
        // ... 其他 reducer
    },
});

export default cartSlice.reducer;

通过调用 userSlice.getInitialState()，我们能够获取到 userSlice 实际的初始状态对象，包括从 localStorage 中加载的 userName 值。然后，我们就可以安全地访问 userInitialState.userName 来设置 cartSlice 的初始 user 属性。

getInitialState() 的优势与原理

使用 getInitialState() 方法有以下几个优势：

1. 准确性保证：它确保你获取到的是切片定义时所计算出的最终初始状态，即使这个状态是动态生成的（例如，从 localStorage 读取）。
2. API规范：这是Redux Toolkit为获取切片初始状态而明确提供的公共API，遵循官方推荐的用法。
3. 避免undefined问题：它解决了直接访问不存在的 slice.initialState 属性而导致的 undefined 错误。

其原理在于，createSlice 在内部处理了 initialState 参数，并将其封装在一个 getInitialState 函数中，以便在需要时能够可靠地获取到这个值。

注意事项与最佳实践

1. 导入切片对象：为了使用 userSlice.getInitialState()，你需要导入的是 createSlice 函数的返回值（即 userSlice 对象本身），而不是仅仅导入它的 reducer。
2. 仅用于初始状态：getInitialState() 仅用于获取切片的 初始 状态。如果你需要在应用运行时访问其他切片的 当前 状态，应该使用Redux选择器（selectors）在组件或中间件中从整个Redux store 中获取。
3. 避免循环依赖：确保切片之间的初始状态依赖是单向的，避免A依赖B的初始状态，同时B又依赖A的初始状态，这可能导致循环依赖问题。
4. 清晰的依赖关系：这种方式虽然可行，但如果过度使用或依赖关系过于复杂，可能会使代码难以理解和维护。对于复杂的跨切片数据流，考虑使用 extraReducers 处理异步操作，或者在组件层级通过选择器组合数据。

总结

在Redux Toolkit中，当一个切片的初始状态需要依赖另一个切片的初始状态时，正确的做法是使用 createSlice 返回对象上的 getInitialState() 方法。这不仅是官方推荐的规范用法，也能有效避免直接访问 slice.initialState 导致的 undefined 错误，确保应用初始状态的正确性和健壮性。理解 createSlice 的返回值结构，特别是 getInitialState 的作用，是高效使用Redux Toolkit的关键。

以上就是在Redux Toolkit中实现跨切片初始状态的有效共享的详细内容，更多请关注php中文网其它相关文章！