Question

在本教程https://redux.js.org/advanced/exampleredditapi的包含containers/AsyncApp.js的部分中，它们具有类似的代码

componentDidMount() {
  const { dispatch, selectedSubreddit } = this.props
  dispatch(fetchPostsIfNeeded(selectedSubreddit))
}

但是我不知道他们在这里做什么。我正在尝试遵循他们的示例，但在带有打字稿的项目中除外。目前，我从chrome控制台收到此运行时错误

Uncaught TypeError: dispatch is not a functon
    at ProxyComponent.componentDidMount (MyComponent.tsx?23ad:27)

我的组件代码如下

export interface MyProps {
    prop1: any[]
}

type MyComponentProps = MyProps & DispatchProp;

class MyComponent extends React.Component<MyComponentProps, MyState> {

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch(fetchAsyncData());
  }

  render() {
    return (
        <div>
        </div>
    );
  }
}

export { MyComponent };

dispatch函数用于在我的redux代码中调用异步动作。我尝试包括一个名为DispatchProps的东西来在我的道具中获得调度功能，但是显然它没有用。该调度功能从何而来？

Answer 1

您在哪里定义dispatch函数？您正在使用connect吗？无论如何，您都需要像使用MyProps一样定义DispatchProp接口

export interface MyProps {
   prop1: any[]
}

export interface DispatchProp {
   dispatch: () => void // unsure what the actual type of your dispatch function is 
}

type MyComponentProps = MyProps & DispatchProp;


...

如果您尝试使用connect来定义道具，它看起来会像这样

function mapDispatchToProps(dispatch: Dispatch<any>): DispatchProp {
    return {
      dispatch: () =>
        dispatch({ type: "some_action_type", payload: somePayload})
    };
}

来自演示文稿组件的打字稿中的异步调度调用

1 个答案: