如何将多个ES6命名导出聚合到单个命名导出中

直接导出slice实例上挂载的整个actions对象即可，完全不需要在导出语句里逐个枚举reducer对应的action名称，后续增删改reducer时也无需调整导出逻辑，从根源上避免漏导出、同步更新导出语句的繁琐操作。

具体实现 #

替换你当前逐一枚举解构的导出代码即可：

// 原写法：必须手动罗列所有action名，reducer变动必须同步修改
// export const { increment, decrement, incrementByAmount } = counterSlice.actions

// 新写法：一次性导出所有action，写完就不用再维护导出逻辑
export const counterActions = counterSlice.actions

// 原有默认导出reducer的逻辑不受任何影响
export default counterSlice.reducer

调用方式 #

在组件、异步逻辑等需要使用action的业务文件中，按需从导出的actions对象里解构需要的方法即可，TypeScript的类型推导、自动补全不会有任何丢失：

import { counterActions } from '@/store/slices/counter'

// 用到哪个解构哪个，新增reducer对应的action直接在这里取就行，不用改slice文件的导出
const { increment, incrementByAmount } = counterActions

// 调用时和之前的写法完全一致
dispatch(increment())
dispatch(incrementByAmount(3))

注意点 #

• 这种写法完全兼容Redux Toolkit的所有原生能力，自动生成的action creator逻辑、类型效果和手动逐个导出完全一致
• 统一通过带命名空间的actions对象调用方法，还能避免不同slice出现同名action时的命名冲突问题
• 后续对slice的reducer做新增、删除、修改操作时，完全不需要触碰导出代码，写完reducer就能直接在业务侧调用对应action

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