Redux/Saga/React initialize a component with dispatch props using mapDispatchToProps

Question

I'm using React with Redux and Saga. My component needs to dispatch an action when user clicks so I use the mapDispatchToProps to map the action into props.

If I use that component from other component, IDE will warn me that I need pass in this dispatch props. However I think dispatch props should be initialized by itself so I don't need to pass in from outside.

Am I understanding correctly?

Example below: I have a DispatchComponent that has a dispatch props. I want to use DispatchComponent in RootComponent. However I have to pass in sendAction in RootComponent otherwise it will not initialize properly.

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

Are you using default import in RootComponent.tsx? (import DispatchComponent from './DispatchComponent') — Fyodor

AKnox AKnox · Accepted Answer · 2020-02-13T01:59:04

You can add a type to the connected props https://redux.js.org/recipes/usage-with-typescript/#typing-the-connect-higher-order-component

and make sure you are importing the default component (connected one)

Redux/Saga/React initialize a component with dispatch props using mapDispatchToProps

1 Answers