React 18 & TypeScript : How to safely type the useReducer hook

Опубликовано: 03 Январь 2023
на канале: Fabio Biondi - Front-End Tutorials

2,131

The React useReducer hook is one of the less used and under rated built-in hook but it can be especially useful when we use several useState hooks in a component that are related to each other.

The concept is very simple:

the state is handled by a (reducer) function
you need to dispatch an action to update the state
the function is automatically invoked after every dispatch and the state is updated accordingly

You can also read the full article and get the source code on my blog:
https://www.fabiobiondi.dev/blog/2023...

00:00 introduction
00:50 useReducer hook
01:30 action and state
03:10 typed actions
04:00 typed state
05:15 split actions
07:55 children components
08:25 TypeScript Guards

-
RELATED ARTICLES:
1) React: From useState hook to useReducer
https://www.fabiobiondi.dev/blog/2023...

2) React 18.x & TypeScript: How to safely type the useReducer hook (the text version of this video)
https://www.fabiobiondi.dev/blog/2023...