Redux Toolkit createSlice的extraReducers方括号包裹action语法疑问

为什么要将incrementBy用方括号包裹作为extraReducers的对象键？ #

这是ES6的计算属性名语法，作用是将方括号内表达式的运行结果作为对象的键名，原理和细节如下：

• 如果你不加方括号直接写incrementBy作为键，JS会直接把变量名的字符串'incrementBy'当成键名，不会读取变量本身的内容。
• createAction返回的是一个action creator函数，Redux Toolkit对这个函数做了特殊处理：重写了它的toString()方法，调用时会返回你传入的action type字符串（也就是例子里的'incrementBy'）。当这个函数被放在计算属性的方括号中时，会自动执行toString()得到对应的type字符串，最终作为extraReducers的键。
• 这种写法的优势是不需要手写重复的type字符串，既避免了拼写错误，后续修改action type时只要改createAction的入参即可，所有用到这个action creator的地方都会自动同步，可维护性更高。

此处用字符串作为对象键的作用是什么？ #

extraReducers对象的键本质上都是需要匹配的action type字符串，Redux的reducer逻辑本身就是根据action的type字段来匹配对应的处理函数：

• 例子中直接写'some/other/action'作为键，就表示当type为some/other/action的action被触发时，执行后面对应的reducer处理逻辑。
• 这种写法通常用于响应不属于当前slice生成的action，比如其他slice的action、异步流程生成的action等，你明确知道对应action的type值时可以直接手写字符串。缺点是没有类型校验和自动同步机制，容易出现拼写错误，因此优先推荐使用action creator加计算属性的写法。

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