在 createSlice 函数中使用名称参数（Redux Toolkit）

Question

我想了解 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;

来自他们的文档，名称参数：

该状态切片的字符串名称。生成的动作类型常量将使用它作为前缀。

不幸的是，即使读完这句话我也没有清楚地了解发生了什么。 我的主要困惑源于这样一个事实：在 Redux Toolkit 中创建 Store 时，我们做了这样的事情 -

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

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

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

如果它是切片减速器的对象，例如 {users : usersReducer, posts : postsReducer}，configureStore 会通过将此对象传递给 Redux mergeReducers 实用程序来自动创建根减速器。

现在，当在我的应用程序（React）中使用react-redux时，我可以通过我在configureStore函数中定义的内容访问这个特定的切片状态，这里是cart而不是cartSlice。 我觉得这非常令人困惑。 那么，如果不是为了给状态切片指定一个名称以供我们的主代码中参考，那么 createSlice 函数中的名称参数的实际用途是什么？它仅用于内部目的吗？

我尝试阅读文档，但无法理解发生了什么，因为我是开发初学者。

Answer 1

从他们的文档中，名称参数：

该状态切片的字符串名称。生成的动作类型常量 将使用它作为前缀。

不幸的是，我什至没有清楚地了解发生了什么 读完这一行后。

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

给定切片：

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;
    },
  },
});

生成的

addItem

、

removeItem

和

clearCart

操作将分别具有操作类型

"cartSlice/addItem"

、

"cartSlice/removeItem"`` and 

“cartSlice/clearCart”`。如果您启用 Redux-Devtools 并安装浏览器扩展，您实际上可以将这些视为分派到存储的操作及其有效负载和存储中的增量状态更新。

在使用

configureStore

或

combineReducers

函数时用于标识化简器函数的名称是完全独立的，并且独立于各个状态切片的

name

属性。当从 UI 组件中的状态（例如

state.cart.item

。