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

uttx8gqw  于 12个月前  发布在  其他
关注(0)|答案(1)|浏览(104)

我想了解Redux-Toolkit API的slice函数中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;

字符串
从它们的documentation,name参数:
此状态片的字符串名称。生成的操作类型常量将使用此作为前缀。
不幸的是,即使在阅读这行之后,我也没有清楚地了解发生了什么。我的主要困惑源于这样一个事实,即在Redux Toolkit中创建商店时,我们做了这样的事情-

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

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


在configureStore函数中,我们传递一个对象。从documentation-
如果它是一个slice reducers的对象,比如{ users: usersReducer, posts: postsReducer },configureStore将通过将这个对象传递给Redux combineReducers实用程序来自动创建根reducer。
现在,当在我的应用程序(React)中使用react-redux时,我可以通过我在configureStore函数中定义的内容访问这个特定的Slice State,这里是cart而不是cartSlice。我发现这非常令人困惑。如果不在我们的主代码中给予State slice命名,那么createSlice函数中的name paramter的实际用途是什么?是否仅用于内部用途?
我试图阅读文档,但无法理解发生了什么。

sgtfey8w

sgtfey8w1#

从他们的文档中,name参数:
此状态片的字符串名称。生成的操作类型常量将使用此作为前缀。
不幸的是,我没有得到一个清晰的图片发生了什么,即使在阅读这行。
它实际上比你想象的要简单得多,切片名只是用来命名生成的动作的作用域。
给定切片:

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"`` and“cartSlice/clearCart”。如果您启用Redux-Devtools并安装浏览器扩展,您实际上可以将这些操作视为分发到商店的操作沿着有效负载和商店中的增量状态更新。 当使用configureStorecombineReducers函数时,用于标识reducer函数的名称是完全独立的,并且独立于各个状态切片的name属性。如何合并reducer就是如何创建状态树,例如const cartItems = useSelector(state => state.cart.item);`,当从UI组件中选择状态时。

相关问题