React Redux Toolkit：Slice的name属性与Store中Reducer命名是否需一致？

结论：slice的name属性和store配置时reducer的属性名不需要强制一致，两者分别承担不同的作用，具体说明如下：

1. slice的name的实际作用 #

slice的name是用来自动生成action type的前缀，避免不同slice的action发生命名冲突。比如你定义name: "counter"，那么该slice内reducers生成的action type会是counter/increment、counter/decrement这类格式，Redux内部依靠这个前缀来区分不同slice的action。

举个具体例子：

const counterSlice = createSlice({
  name: "counter",
  initialState: { count: 0 },
  reducers: {
    increment: (state) => { state.count++ }
  }
});

此时调用counterSlice.actions.increment()会返回{ type: "counter/increment" }，这个type里的前缀就来自slice的name。

2. store中reducer属性名的实际作用 #

store里reducer对象的属性名，是该slice的状态在Redux全局state中的键名。比如你写counter: counterReducer，全局state里就会有state.counter这个字段，对应该slice的状态。

所以组件里useSelector(state => state.counter.count)中的counter，就是你在store里定义的键名，和slice的name没有直接关联——如果你在store里把reducer挂在myCount这个键上，组件里就需要写state.myCount.count，不管slice的name是什么。

3. 为什么示例里都用相同名称？ #

示例中统一使用相同名称，纯粹是为了提升代码可读性和维护性：看到state.counter，就能立刻联想到这是来自name: "counter"的slice，不用来回查找对应关系，减少认知负担。

不一致场景的验证示例 #

我们可以把slice的name和store的reducer键名设为不同值，代码依然可以正常运行：

counterSlice.js：

export const counterSlice = createSlice({
  name: "myCounter", // 与store键名不同
  initialState: { count: 0 },
  reducers: {
    increment: (state) => { state.count++ }
  }
});

store.js：

import { counterSlice } from "../features/counter/counterSlice";

export const store = configureStore({
  reducer: {
    countStore: counterSlice.reducer, // 键名与slice name不同
  }
});

组件代码：

import { useSelector, useDispatch } from "react-redux";
import { counterSlice } from "../features/counter/counterSlice";

const count = useSelector((state) => state.countStore.count); // 使用store中定义的键名
const dispatch = useDispatch();

// 调用action creator不受影响，因为action type由slice的name生成
<button onClick={() => dispatch(counterSlice.actions.increment())}>+</button>

内容的提问来源于stack exchange，提问作者devnull69