Question

在我们的项目中，所有动作创建者的定义如下：

export const actionCreatorFunctionName(arg1, arg2...) {
    return (dispatch: Dispatch, getStore: () => StoreState) => {
        // ... function logic ...
        dispatch(actionFunctionName(args...));
    }
}

一些动作创建者发出HTTP请求，并且在请求解决之前不调用dispatch。

使用connect临时对象将这些动作创建者映射到道具，例如：

import * as ActionCreators from "./actionCreators";

connect(mapStateToProps, { actions: ActionCreators })(SomeComponent);

问题是，使用此设置时，似乎无法正确配置组件的props接口。我们尝试过像这样配置道具：

interface Props {
    actions: typeof ActionCreators;
}

但是这不起作用，因为actions道具与ActionCreators的类型实际上不是相同的，因为connect临时将actionCreators从将函数返回到普通函数的函数更改了。 / p>

Answer 1

我认为，除了定义动作之外，您还需要定义一种Actions类型，可以将其导出并在道具中使用。

export type Actions = {
  action1: (arg1: string) => void,
  action2: (arg1: string, arg2: number) => void
}

export function action1(arg1: string) {
  // ...
}

然后在道具中使用Actions界面

type Props = {
  actions: Actions
}

Answer 2

如果我的理解正确，您在从state向组件发送store时遇到麻烦吗？如果是这种情况，我们假设您的商店中有一个名为items的对象的数据，将下面的代码放在Component的connect语句上方（这会使items数据可用于Component）；

const mapStateToProps = (state) => {
  items: state.items
}

如何在react-redux中正确键入映射到道具的动作创建者

2 个答案: