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

Question

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行中，我必须使用state.counterwhen.counter没有在切片中的其他任何地方引用？我确实喜欢这样，.counter但我只是想了解它是如何产生该属性的。

Answer 1

namein 的属性由createSliceredux-toolkit 在内部使用来为您的操作创建名称。如果名字是'counter'那么updateCounter行动就会有{ type: 'counter/updateCounter' }。如果是的话，'abc'那么你的行动就会有{ type: 'abc/updateCounter' }。 这个名字并不重要。只要它与应用程序中的任何其他减速器不同，就可以了。

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

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

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

此选择器函数假设此切片中的减速器将位于counter根减速器的属性上。当您将减速器与或组合时，该减速器相对于根状态的位置由属性键确定。configureStorecombineReducers

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

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]