javascript - 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 ，就可以了。

If I change .counter to something else, it breaks the entire project

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

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

此选择器函数假定来自此切片的缩减器将位于根缩减器的 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]