Redux / Saga / React инициализирует компонент с помощью диспетчерских реквизитов, используя mapDispatchToProps

Question

Я использую React с Redux и Saga. Мой компонент должен отправлять действие, когда пользователь щелкает, поэтому я использую mapDispatchToProps для сопоставления действия с реквизитом.

Если я использую этот компонент из другого компонента, IDE предупредит меня, что мне нужно передать в этой диспетчеризации реквизит. Однако я думаю, что диспетчерские реквизиты должны быть инициализированы самим собой, поэтому мне не нужно проходить извне.

Правильно ли я понимаю?

Пример ниже: У меня есть DispatchComponent, у которого есть реквизиты для отправки. Я хочу использовать DispatchComponent в RootComponent. Однако я должен передать sendAction в RootComponent, иначе он не будет правильно инициализирован.

DispatchComponent.tsx

type DispatchProps = {
    sendAction: () => void;
};

export const DispatchComponent: React.FunctionComponent<DispatchProps> = (props) => {
    return (
        <Button onClick={props.sendAction}>Click me</Button>
    );

};

const mapDispatchToProps = (dispatch: Dispatch<Action>) => ({
    sendAction: () =>
        dispatch(setAction)
});

export default connect(
    null,
    mapDispatchToProps)
(DispatchComponent);

RootComponent.tsx

export const RootComponent = () => {
    return (
        <DispatchComponent/> // IDE here will warn me that I need to pass in `sendAction`
    );

};

export default connect(
    null,
    null)
(RootComponent);

Answer 1

Вы можете добавить тип к подключенным реквизитам https://redux.js.org/recipes/usage-with-typescript/#typing -the-connect-высшего порядка-компонента

и убедиться, что вы импортируете компонент по умолчанию (подключенный)