开发者问题收集

在 createSlice 函数中使用 name 参数 (Redux Toolkit)

2023-12-24
338

我想了解 Redux-Toolkit API 的 createSlice 函数中 name 参数的用法。

import { createSlice } from "@reduxjs/toolkit";

const cartSlice = createSlice({
  name: "cartSlice", // Used for internal purposes
  initialState: {
    item: [],
    cost: 0,
  },
  reducers: {
    addItem: (state, action) => {
      state.item.push(action.payload);
      ++state.cost;
    },
    removeItem: (state) => {
      state.item.pop();
      --state.cost;
    },
    clearCart: (state) => {
      state.item.length = 0;
      // state.item.length = [] won't work for some reason
      state.cost = 0;
    },
  },
});

export const { addItem, removeItem, clearCart } = cartSlice.actions;
export default cartSlice.reducer;

从他们的 文档 中,name 参数:

A string name for this slice of state. Generated action type constants will use this as a prefix.

不幸的是,即使读完这一行,我也没有清楚地了解发生了什么。 我的主要困惑源于这样一个事实:在 Redux Toolkit 中创建 Store 时,我们会执行类似以下操作 -

import { configureStore } from "@reduxjs/toolkit";
import cartSlice from "./cartSlice";

export default appStore = configureStore({
  reducer: {
    cart: cartSlice,
  },
});

在 configureStore 函数中,我们传递了一个对象。来自 文档 -

If it is an object of slice reducers, like { users: usersReducer, posts: postsReducer } , configureStore will automatically create the root reducer by passing this object to the Redux combineReducers utility.

现在,当我在我的应用程序 (React) 中使用 react-redux 时,我能够通过我在 configureStore 函数中定义的内容访问此特定的 Slice State,此处为 cart 而不是 cartSlice。 我发现这非常令人困惑。 那么,如果不为 State 切片提供名称以供在主代码中引用, createSlice 函数中 name 参数的实际用途是什么?它仅用于内部目的吗?

我尝试阅读文档,但无法理解发生了什么。

1个回答

From their documentation, name parameter:

A string name for this slice of state. Generated action type constants will use this as a prefix.

Unfortunately, I did not get a clear picture of what's happening even after reading this line.

它确实比您想象的要简单得多。切片名称仅用于命名所生成操作的范围。

给定切片:

const cartSlice = createSlice({
  name: "cartSlice",
  initialState: {
    item: [],
    cost: 0,
  },
  reducers: {
    addItem: (state, action) => {
      state.item.push(action.payload);
      ++state.cost;
    },
    removeItem: (state) => {
      state.item.pop();
      --state.cost;
    },
    clearCart: (state) => {
      state.item = []; // <-- just "reset" back to empty array
      state.cost = 0;
    },
  },
});

生成的 addItemremoveItemclearCart 操作将分别具有操作类型 "cartSlice/addItem""cartSlice/removeItem"`` 和 "cartSlice/clearCart"`。如果您启用 Redux-Devtools 并安装浏览器扩展程序,您实际上可以将这些视为发送到商店的操作及其有效负载和商店中的增量状态更新。

使用 configureStorecombineReducers 函数时用于标识 Reducer 函数的名称与各个状态切片的 name 属性完全独立且无关。合并 Reducer 的方式就是创建状态树的方式,例如 state.cart.item ,从 UI 组件中的状态中进行选择时,例如 const cartItems = useSelector(state => state.cart.item);

Drew Reese
2023-12-24