Redux Toolkit 如何确定状态对象上的属性名称？答案

【问题标题】：How does Redux Toolkit determine property names on the state object?Redux Toolkit 如何确定状态对象上的属性名称？
【发布时间】：2021-08-21 18:10:46
【问题描述】：

import { createSlice } from '@reduxjs/toolkit'

export const countersSlice = createSlice({
    name: 'based? based on what',
    initialState: [0, 0, 0, 0],
    reducers: {
        updateCounter: (state, action) => {
            var id = action.payload.id
            var value = action.payload.value

            state[id] += value
        }
    }
})

export const { updateCounter } = countersSlice.actions

export const selectCount = id => state => state.counter[id]

export default countersSlice.reducer

为什么在selectCount 行中，当切片中的其他任何地方都没有引用.counter 时，我必须使用state.counter？我确实喜欢它是.counter，但我只是想了解它是如何产生该属性的。

【问题讨论】：

在任何人可以帮助您之前，您应该尝试解释该代码应该做什么。试图猜测应该做什么代码，你是对的，selectCount 什么都不做。您应该存储一个类似chosenCounter 的字段，并在其上保存您要更新的计数器的ID。但是，就像我之前提到的那样，您应该说出您想要实现的内容，然后人们才能为您提供帮助。
但它似乎在做某事，我正在将它导入到其他文件中，这些文件将它用于 p 标签（在我学习时只是一个小的愚蠢测试项目）hastebin.com/umadogatud.js 如果我将 .counter 更改为其他内容，它会破坏整个项目

标签： javascript redux redux-toolkit

【解决方案1】：

createSlice 中的 name 属性在 redux-toolkit 内部用于为您的操作创建名称。如果名称为'counter'，则updateCounter 操作将具有{ type: 'counter/updateCounter' }。如果是'abc'，那么您的操作将有{ type: 'abc/updateCounter' }。 这个名字无关紧要。只要它与您应用中的任何其他减速器不同，就可以了。

如果我将 .counter 更改为其他内容，则会破坏整个项目

现在您在谈论其他事情，即如何从应用的根状态中选择数据。

export const selectCount = id => state => state.counter[id]

此选择器函数假定此切片中的 reducer 将位于根 reducer 的 counter 属性上。当您将减速器与configureStore 或combineReducers 结合使用时，此减速器相对于根状态的位置由属性键确定。

您当前的选择器假定您的商店如下所示：

import {configureStore} from '@reduxjs/toolkit';
import counterReducer from './yourReducerFile.js'

export default configureStore({
  reducer: {
    counter: counterReducer
  }
});

此属性键通常与切片的name 匹配，但它没有匹配。

只要选择器函数使用相同的属性键，您就可以使用任何属性键。例如：

export default configureStore({
  reducer: {
    someOtherProperty: counterReducer
  }
});

export const selectCount = id => state => state.someOtherProperty[id]

【讨论】：