从 Redux Toolkit 的 createSlice 获取动作类型

Question

我正在使用 createSlice 和 useReducer。

我希望正确输入调度，即 React.Dispatch<ReducerActions>。

如何从 `createSlice` 中提取操作类型？

以下不起作用，它解析为 AnyAction...我想说这是可以理解的，因为所有操作都通过所有减速器。

Dispatch<Parameters<typeof slice["reducer"]>[1]>

Answer 1

createSlice 将动作创建者作为键控对象存储在属性 actions 中。我们正在寻找的是所有动作创建者的 return 类型的联合。我们将使用 mapped type 来获取它。

type SliceActions<T> = {
    [K in keyof T]: T[K] extends (...args: any[]) => infer A ? A : never;
}[keyof T]

type ActionTypes = SliceActions<typeof slice.actions>

我在此 Playground Link 中使用了文档中的反例，ActionTypes 的值计算为：

type ActionTypes = {
    payload: number;
    type: string;
} | {
    payload: undefined;
    type: string;
}

请注意，redux 工具包将其操作类型声明为 string 而不是特定的字符串文字。

Answer 2

基于 Linda 类型，还有另一种更好打字的方法：

const storeSlice = createSlice({
  //...
  reducers: {
    fetchData: (state, action: PayloadAction<string>) => {
      //...
    onFetchFailed: (state, action: PayloadAction<string>) => {
      //...
    },
  },
});
type SliceActions<T> = {
  [K in keyof T]: {type: K; payload: T[K] extends (...args: infer P) => void ? P[0] : never};
}[keyof T];

/* 
ActionTypes = {
    type: "fetchData";
    payload: string;
} | {
    type: "onFetchFailed";
    payload: string;
}
*/
type ActionTypes = SliceActions<typeof storeSlice.actions>;

从 Redux Toolkit 的 createSlice 获取动作类型

Get action types from Redux Toolkit's createSlice

typescript

redux-toolkit

如何从 `createSlice` 中提取操作类型？

从 Redux Toolkit 的 createSlice 获取动作类型

Get action types from Redux Toolkit's createSlice

typescript

redux-toolkit

如何从 createSlice 中提取操作类型？

如何从 `createSlice` 中提取操作类型？