Redux 工具包 - 如何在调用动作创建者时检查负载类型

Question

我使用 redux 工具包已有一段时间了，我喜欢它减少样板文件的方式。我也想使用打字稿，但我无法对动作负载进行类型检查。

f.i。我有：

const increase: CaseReducer<AppState, PayloadAction<number>> = (
    state,
    action,
) => {
    state.usedWeight += action.payload;
};

并在 createSlice 中使用它。当我想发送那个动作时，我写

    dispatch(increase(10));

但我也可以写

    dispatch(increase("10"));

没有打字稿抱怨。

当我将鼠标悬停在 vs 代码中的导入增加时，它说：

const increase: ActionCreatorWithPayload<any, string> | ActionCreatorWithoutPayload<string>

为什么 ActionCreator 不知道这个 Action 期望哪个 Payload？

Answer 1

我也遇到了同样的问题

Redux Toolkit 为 action creator 提供类型保护：您可以测试 increment.match(action) 是否为真。然后类型检查在 if 语句内工作，但在 if 语句外不工作。

        parseInt(action.payload, action.payload); // compiles without any error
        if (increment.match(action)) {
            parseInt(action.payload, action.payload); // here TypeScript produces an error
        }

难道不应该在不取消此类类型保护的情况下确保类型检查吗？我非常感谢有人找到更好的解决方案。

Answer 2

问题是我没有直接在createSlice中使用CaseReducer，而是在

中累积了它们

const reducers: ValidateSliceCaseReducers<
    AppState,
    SliceCaseReducers<AppState>
> = {
    ### List of CaseReducers ###
}

我在这里使用的打字中断了稍后为动作创建者推断类型。（我想我是从 redux 文档中获取并使用它们的，否则我将不得不将 AppState 作为状态类型分别添加到每个 reducer。）

我现在的解决方案是将 CaseReducers 直接放入 createSlice 调用中。为了保持切片干净，我将把那些 CaseReducers 放在子文件中。

Redux 工具包 - 如何在调用动作创建者时检查负载类型

Redux Toolkit - How to have the payload type checked, when calling an action creator

typescript

redux