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

Answer 1

createSlice中的name属性由redux-toolkit内部使用，用于为您的操作创建名称。如果名称是'counter'，那么updateCounter动作将具有{ type: 'counter/updateCounter' }。如果是'abc'，那么你的动作就会有{ type: 'abc/updateCounter' }这个名字不重要． 只要它不同于你的应用程序中的任何其他reducer，那么你就可以。

如果我将。counter更改为其他内容，它将破坏整个项目

现在你在谈论别的东西，这就是你如何从你的应用程序的根状态选择你的数据。

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

这个选择器函数假设这个片中的减速机位于根减速机的counter属性上。这个reducer相对于根状态的位置是，由属性键决定。当您将减速机与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]