Dispatch<> type parameter provides a type-safe dispatch() function

[code-hunger]

Redux 4 introduces a type-safe dispatch function, which means that the argument passed to dispatch() must be the type of the first Dispatch<Action> parameter. If I knew this ealier, it would save me two hours debugging and searching why dispatch() with an incomplete action doesn't trigger an error :) I think this deserves its section in the guide.

[piotrwitek]

Hello,
Could you please show us a complete code example to better convey the context of your issue and the use case?
Thanks!

[code-hunger]

Sorry for not being clear!

Suppose I have this action type:

type MyActionType =
  | { type: "STAND_UP", who: number }
  | { type: "SIT_DOWN", who: number }

And a connected component dispatches an action:

const mapDispatchToProps = (dispatch: Dispatch<MyActionType>): AppDispatchProps => ({
  standUp(who: number) {
    dispatch({ type: "STAND_UP", who });
  }
});

The important thing is the type of the dispatch parameter: Dispatch<MyActionType>). In older code examples you may find it as just Dispatch, and because a google search for typescript redux dispatch an action leads to your project, I think it's a good idea to have the situation explained here. It's a bit hard to find what exactly one needs to put in the template parameters (although I agree it's quite logical), and initially I had put the type of my State, not MyAction.

And because by that time the argument to the dispatch function wasn't type-checked against the template argument of Dispatch, I didn't get any errors. It was fine, untill I decided to add a new parameter to the STAND_UP action. Something misteriously broke, because I had forgotten about this burried component that dispatched a STAND_UP action, and I didn't update it to send the new data.

If I knew how to type the dispatch function correctly and had updated to redux 4, this wouldn't have happened. Anyway, my point was to add this information to your guide, because it aims to be complete, and this is a gap that I found and think is worth filling.

[piotrwitek]

The important part to highlight here is that it's useful in cases when you dispatch an action object on the dispatch call site as opposed to using action-creators defined in a separate reusable module.
In latter case you'd not need to type-check dispatch at all, because it's delegated to the action-creator.

[code-hunger]

I haven't looked deeply into the idea about action creators, they seem appealing - but so far I didn't feel a need for them and used plain old action objects. Thanks for pointing them up! 👍

I just wanted to raise attention to the two places where you're giving an example with mapDispatchToProps and dispatch is typed as Dispatch, while the proper type is Dispatch<ActionType>. Otherwise you'd get a compilation error for the missing tempalte parameter.

I would have sent a PR but initially my idea was to discuss a more throughout example about the way I was doing the things, so I did not send one. Now that such discussion is unneded and this issue will be closed shortly, I might as well send one, but for a such small change I guess it's not worth it.

[IssueHuntBot]

@BoostIO funded this issue with $20. Visit this issue on Issuehunt

[IssueHuntBot]

@loadbalance-sudachi-kun funded this issue with $256. Visit this issue on Issuehunt

[IssueHuntBot]

@piotrwitek has started working. Visit this issue on Issuehunt

[IssueHuntBot]

@piotrwitek has submitted output. Visit this issue on Issuehunt

[IssueHuntBot]

@piotrwitek has rewarded. Visit this issue on Issuehunt

[piotrwitek]

Added a new section explaining the concept of type-safe Dispatch and also entire concept of typing the connect mapper functions and the connect itself