redux减速机的条件分型

Question

我正在尝试创建一个可重用的组件来呈现“选择”表单项及其相关选项。 它接受redux道具，该道具是一个动作创建者，负责将所选选项传递到 redux 存储区以在整个应用程序中使用。

我有两个可以选择的动作创建者：

第一个是：

setCompany: (state, action: PayloadAction<string>) => {
        state.selectedCompany = action.payload;
    },

第二个是：

setStatus: (state, action: PayloadAction<SelectStatus['status']>) => {
        state.status = action.payload;
    },

JobState['status'] 类型为： status: 'success' | 'error' | 'default' | 'processing' | 'warning'; status: 'success' | 'error' | 'default' | 'processing' | 'warning';

在 Select 组件中，我尝试执行以下操作：

interface SelectsProps {
fetchOptionData?: () => void;
optionsArray?: [];
placeholder: string;
showSearch: boolean;
badges: boolean;
redux?: ActionCreatorWithPayload<string | SelectStatus['status']>;
// I also tried ActionCreatorWithPayload<string> |                           //ActionCreatorWithPayload<SelectStatus['status']> but neither is working
}

在我的父组件中，我尝试传入上面定义的 setStatus 的 redux 动作。 但是，我收到以下错误：

`Type 'ActionCreatorWithPayload<"success" | "error" | "default" | "processing" | "warning", string>' is not assignable to type 'ActionCreatorWithPayload<string, string>'.`

   <Selects
                        redux={setStatus}
                        placeholder='Default'
                        showSearch={false}
                        badges={true}
                        optionsArray={badges}
                    />
    };

如果我将其作为一个联合体，它似乎默认为字符串，并且如果有效则不接受要传递的状态。 有没有办法可以选择正确的有效载荷类型？

谢谢

Answer 1

解决方案

您需要两个动作创建者类型的联合，而不是联合的动作创建者。

redux?: ActionCreatorWithPayload<string> | ActionCreatorWithPayload<SelectStatus["status"]>;

---

解释

ActionCreatorWithPayload<string | SelectStatus['status']> ActionCreatorWithPayload<string | SelectStatus['status']>表示可以使用string或SelectStatus['status']的参数调用的动作创建者。 setCompany问题，因为SelectStatus['status']是string的子集。 但是setStatus是一个错误，因为它只能接受SelectStatus['status'] 。 它不能接受工会。

您需要两个动作创建者的联合，即ActionCreatorWithPayload<string> | ActionCreatorWithPayload<SelectStatus["status"]> ActionCreatorWithPayload<string> | ActionCreatorWithPayload<SelectStatus["status"]> 。 这意味着您可以拥有接受string的 function 或接受SelectStatus['status']的 function 。 它不再需要接受两者的结合。

调用此联合时可能会遇到问题，因为您不知道它接受哪种参数类型。

---

注意：我不知道您为什么在一个地方使用SelectStatus["status"]而在另一个地方使用JobState["status"] 。 我假设它们是相同的。 我会将该类型提取为命名类型：

export type JobStatus = JobState["status"]