You probably have some experience of using Redux (react-redux) with class components, and if that is the case, then you will understand how useReducer works. The concepts are basically the same: actions, reducers, dispatch, store, and state. Even if, in general, it seems very similar to react-redux, they have some differences. The main difference is that react-redux provides middleware and wrappers such as thunk, sagas, and many more besides, while useReducer just gives you a dispatch method that you can use to dispatch plain objects as actions. Also, useReducer does not have a store by default; instead, you can create one using useContext, but this is just reinventing the wheel.
Let's create a basic application to understand how useReducer works. You can start by creating a new React app:
create-react-app reducer --template typescript
Then, as always, you can delete all files in your src folder except App.tsx and index.tsx to start a brand-new application...
