请问Redux Toolkit场景下语法 [increment]: () => {} 的含义是什么？

你看到的语法由两部分特性共同作用：

1. ES6 计算属性名语法 #

[变量/表达式]: 值是ES6新增的对象字面量计算属性名特性，作用是把方括号内的表达式运行结果，自动转成字符串后作为对象的属性键。
举个基础例子：

const key = 'name'
const obj = { [key]: '张三' }
// 等价于 const obj = { name: '张三' }

2. Redux Toolkit createSlice 生成的action creator的特性 #

你从counterSlice导入的increment本质是RTK生成的action creator函数，RTK对这类函数重写了内置的toString()方法，调用时会返回对应的action type字符串（也就是你打印出来的counter/increment，由slice的name属性 + reducer名拼接而成）。
当你把increment放到计算属性的方括号中时，JS会自动调用它的toString()方法拿到字符串作为键，所以你写的：

const object = {
  [increment]: () => {}
}

完全等价于：

const object = {
  "counter/increment": () => {}
}

常见使用场景 #

这种写法最常见的用途是避免手写action type字符串，降低拼写错误概率，比如在extraReducers中监听其他slice的动作时，直接传入action creator即可，不需要手动写完整的type字符串。

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