Redux-toolkit helps us to significantly reduce boilerplate in the redux layer of our applications. If you’re not familiar with redux-toolkit you can reference official documentation.
Let create a simple todo reducer:
One downside of this code, is that it’s not possible to reuse types of actions and action payloads
removeTodo. For example if you need to reuse action type in a middleware handler (e.g.
redux-saga). One simple solution would be to extract those as separate types:
However, this once again increases boilerplate. Another option would be to use
ReturnType utility to retrieve action return type from the payload creator:
This however make verbose code of the middleware, also this strategy isn’t good if we want to reuse just payload type (for example a utility that should prepare a payload for action). To do that we should get the type on key
payload of the action type. But it looks even worse than example before:
However there’s a way to automatically map all action creator types to action and action payloads types. To do that we need to have a generic utility. What we need is to achieve a map of action creators and transform it to actions or action payloads map. Once again we’ll use
ReturnType utility to achieve that:
And within those utilities we can easily create desired types in an automatic fashion:
I would prefer to reference type as
Payloads.setTodoStatus , however TS doesn’t like this syntax.
A final note, is that
setTodoStatus type is camel case, and it would be nice to capitalize it. I find it amazing, that TS 4 allows us to do so, by the ability to manipulate objects keys and
Hope you found above helpful. Have a good day :)