从 Redux Slice 中获取值作为另一个 Slice 的初始状态

本文介绍了如何在 Redux 应用中，从一个 Slice 中获取特定值（例如用户名），并将其用作另一个 Slice 的初始状态。重点在于理解 createSlice 的返回值，并使用 getInitialState() 方法来正确获取初始状态值。

在 Redux 应用开发中，经常会遇到需要在不同 Slice 之间共享状态的情况。一种常见的场景是将一个 Slice 中的值作为另一个 Slice 的初始状态。本文将详细介绍如何使用 Redux Toolkit 实现这一目标，并避免一些常见的错误。

理解 createSlice 的返回值

Redux Toolkit 的 createSlice 函数是创建 Redux Slice 的核心工具。它简化了 Redux 的配置过程，并提供了许多便捷的功能。然而，要正确地从一个 Slice 中获取初始状态，首先需要理解 createSlice 的返回值。

createSlice 函数返回一个包含以下属性的对象：

• name: Slice 的名称。
• reducer: 用于处理 Slice 状态更新的 Reducer 函数。
• actions: 一个包含 Action Creator 的对象，用于触发状态更新。
• caseReducers: 一个包含 Case Reducer 的对象，用于定义不同 Action 类型对应的状态更新逻辑。

• getInitialState: 一个函数，用于获取 Slice 的初始状态。

正确获取初始状态

许多开发者尝试直接访问 userSlice.initialState.userName 来获取用户名，但这种方法通常会导致 undefined 的结果。这是因为 initialState 属性是 createSlice 内部使用的，并没有直接暴露给外部。

正确的做法是使用 userSlice.getInitialState().userName 来获取初始状态中的用户名。getInitialState() 函数会返回一个包含初始状态的对象，然后可以从中访问 userName 属性。

示例代码

以下示例代码演示了如何从 userSlice 中获取 userName，并将其用作 cartSlice 的初始状态：

// 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", 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
import { createSlice } from '@reduxjs/toolkit';
import { userSlice } from './userSlice';

const initialState = {
    numberOfItems: 0,
    details: [],
    total: 0,
    user: userSlice.getInitialState().userName, // 正确的方式
}

const cartSlice = createSlice({
    name: 'cart',
    initialState,
    reducers: {},
});

export default cartSlice.reducer;

注意事项

• 确保在 cartSlice 中正确导入了 userSlice。
• userSlice.getInitialState() 只会在 cartSlice 初始化时执行一次。如果 userSlice 的状态在之后发生变化，cartSlice 的 user 属性不会自动更新。如果需要实时同步状态，请考虑使用 useSelector 等 Redux Hook。
• 如果 userSlice 的初始状态依赖于异步操作（例如从 API 获取数据），则需要在 userSlice 完成初始化后再初始化 cartSlice。可以使用 Redux Thunk 或 Redux Saga 等中间件来处理异步操作。
• 使用 localStorage 持久化 userName 可能会导致一些问题，例如不同浏览器或设备之间的数据不一致。请根据实际需求选择合适的持久化方案。

总结

本文介绍了如何从 Redux Slice 中获取值作为另一个 Slice 的初始状态。通过理解 createSlice 的返回值，并使用 getInitialState() 方法，可以正确地获取初始状态值。同时，需要注意一些潜在的问题，例如状态同步和异步操作。希望本文能够帮助你更好地使用 Redux Toolkit 构建复杂的 Redux 应用。