当两个 createSlice 组件具有相同名称的 reducer 时，如何使用使用 `useDispatch`

Question

情况：

假设有两个 Slice 组件使用 redux-toolkit 定义。 因为数据类别不同，这就是为什么它们中的每一个都存储在单独的 Slice 组件中。现在有一些同名的 reducer 函数，这些函数的内部代码是不同的，因为数据类别不同但reducer的名称相同。

所以在这种情况下我们怎么能使用useDispatch？

例子：

这是一个 createSlice 组件，我在这里使用了打字稿：-

import { createSlice } from "@reduxjs/toolkit";

type ImageStructure = {
   id: String;
   originalImage: String;
   croppedImage: String;
   zIndex: Number;
   posX: Number;
   posY: Number;
};
type PayloadStructure = {
   payload: {
      id: String;
      originalImage: String;
      croppedImage: String;
      zIndex: Number;
      posX: Number;
      posY: Number;
   };
};
type RemovePayload = {
   payload: {
      id: String;
   };
};
export const ImgSlice = createSlice({
   name: "image",
   initialState: Array<ImageStructure>(),
   reducers: {
      add: (state, action: PayloadStructure) => {
         state.push(action.payload);
      },
      remove: (state, action: RemovePayload) => {
         let arr = Array<ImageStructure>();
         for (let val in state) {
            if (state[val].id !== action.payload.id) {
               arr.push(state[val]);
            }
         }
         state = arr;
      },
   },
});
export const { add, remove } = ImgSlice.actions;
export default ImgSlice.reducer;

这是另一个 createSlice 组件：-

import { createSlice } from "@reduxjs/toolkit";

type textStructure = {
   id: String;
   value: String;
   zIndex: Number;
};
type PayloadStructure = {
   payload: {
      id: String;
      value: String;
      zIndex: Number;
   };
};
type RemovePayload = {
   payload: {
      id: String;
   };
};
export const textSlice = createSlice({
   name: "text",
   initialState: Array<textStructure>(),
   reducers: {
      add: (state, action: PayloadStructure) => {
         state.push(action.payload);
      },
      remove: (state, action: RemovePayload) => {
         let arr = Array<textStructure>();
         for (let val in state) {
            if (state[val].id !== action.payload.id) {
               arr.push(state[val]);
            }
         }
         state = arr;
      },
   },
});
export const { add, remove } = textSlice.actions;
export default textSlice.reducer;

因此，在上述场景中，可能会有更多类型的切片（例如，用于 svg、视频、HtmlElement 的切片）具有相同的 reducer 操作。

在这种情况下，我们该如何使用useDispatch在我们的通用反应组件中？

可能的方法：

一个简单的解决方案是明显地更改两个 Slice 组件中的缩减器的名称。但我不认为这是一个可扩展的解决方案（当有多个 Slice 组件具有相同的 reducer 名称时。

Answer 1

如果遇到冲突，请在导入时重命名动作创建者：

import { add as addText } from "./textSlice";
import { add as addImage } from "./imageSlice";

dispatch(addText(""))
dispatch(addImage(img))

或者您在导出时执行此操作：

export const { add: addText, remove: removeText } = textSlice.actions;