React Redux Toolkit同名action函数导入冲突的解决方法

你可以通过以下几种方式解决同名action的导入冲突，且无需修改slice中定义的show方法名：

1. 导入时重命名 #

在app.tsx中导入时，使用as关键字为每个同名action指定不同别名，这是最直接的解决方案：

import { show as showA } from './app/reducer/a';
import { show as showB } from './app/reducer/b';

调用action时直接使用别名即可：

dispatch(showA());
dispatch(showB());

2. 导入整个Slice对象 #

直接导入每个slice的完整对象，通过slice.actions访问对应action，能清晰区分每个action所属的slice：

确保slice文件已导出slice本身（你的代码中已导出a和b），然后在app.tsx中：

import { a } from './app/reducer/a';
import { b } from './app/reducer/b';

调用时通过slice对象访问action：

dispatch(a.actions.show());
dispatch(b.actions.show());

3. 单独定义Action（可选） #

如果需要更灵活的action管理，可以用createAction单独定义action，再在slice的extraReducers中处理，依然保留show方法名：

在a.tsx中修改为：

import { createSlice, createAction } from '@reduxjs/toolkit';

export const show = createAction('a/show');

const initialState = { open: false };

export const a = createSlice({
  name: 'a',
  initialState,
  extraReducers: (builder) => {
    builder.addCase(show, (state) => {
      state.open = true;
    });
  }
});

export default a.reducer;

b.tsx同理：

import { createSlice, createAction } from '@reduxjs/toolkit';

export const show = createAction('b/show');

const initialState = { open: false };

export const b = createSlice({
  name: 'b',
  initialState,
  extraReducers: (builder) => {
    builder.addCase(show, (state) => {
      state.open = true;
    });
  }
});

export default b.reducer;

之后在app.tsx中依然用重命名导入即可：

import { show as showA } from './app/reducer/a';
import { show as showB } from './app/reducer/b';

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