Redux Toolkit中slice reducer导入机制是什么？

这个能力属于JavaScript 原生 ES Module 语法特性，既不是 Redux Toolkit 的专属能力，也和 React 框架无关。

具体运行逻辑 #

• 你看到的slice文件最后一行写的是export default counterSlice.reducer，这是ES Module规范里的默认导出语法，单个JS模块最多只能存在一个默认导出。
• 对于默认导出的成员，导入方在import时可以完全自定义接收的变量名，不需要和导出侧的变量名做任何匹配。示例里写import counterReducer from '../features/counter/counterSlice'，本质就是把目标模块默认导出的reducer函数，赋值给当前文件里自定义命名的counterReducer变量而已。
• 这个命名没有任何强制约束，哪怕你导入时写import abc from '../features/counter/counterSlice'，再在store配置里写counter: abc，代码运行效果完全一致。示例里起名为counterReducer纯粹是为了代码可读性，看到名字就能知道这个变量存的是counter切片对应的reducer。

补充说明：只有默认导出支持这种导入时自由命名的特性。如果是命名导出（比如示例里导出action的写法export const { increment, decrement, incrementByAmount } = counterSlice.actions），导入时必须在大括号内写和导出侧一致的成员名，比如import { increment } from 'xxx'，如果要重命名必须显式用as关键字，比如import { increment as add } from 'xxx'。

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