Асинхронный вызов диспетчеризации в машинописи из компонента представления

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 };

Функция диспетчеризации предназначена для вызова асинхронного действия в моем коде с избыточностью. Я попытался включить что-то под названием DispatchProps, чтобы получить функцию диспетчеризации в моем реквизите, но это явно не сработало. Откуда эта диспетчерская функция?

Answer 1

Где вы определяете свою функцию dispatch? Вы делаете это с помощью Connect? В любом случае, вам нужно определить свой интерфейс DispatchProp, как вы это сделали с MyProps

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})
    };
}