Real Deal

As we already understand the need for Redux, we can dive right into the details. We will explore each concept in detail and provide a step-by-step guide to implementing Redux in the React projects.

Goals

Our main goals are as follows:

• Understand the role of Redux in managing the application state.
• Implement the logic of a "Counter" app using the Redux Toolkit.
• Gain hands-on experience with Redux concepts through a practical example.

Project overview

Our example project is a "Counter" app. It will be a practical demonstration of Redux implementation using the Redux Toolkit. By following along and working through the examples, you will gain a solid understanding of Redux and be able to apply it to your projects.

Result project illustration

To help to visualize the desired outcome, here is the functionality we wish to achieve:

Starting code

Inspect the provided files and folders to familiarize yourself with the project structure. Currently, only UI components are present without any logic. If you prefer to work in your local environment, copy the components. However, all code examples will be presented throughout the section.

Redux folder

It is recommended to inspect the "redux" folder very carefully. The following folders and files are presented.

• actions/counterAction.js: This file will contain the action creators for the counter functionality. It defines functions that create actions related to the counter.
• reducers/counterReducer.js: This file will contain the reducer function responsible for managing the counter state. It specifies how the state should change in response to different actions.
• store.js: This file will set up the Redux store using Redux Toolkit's configureStore function. It combines multiple reducers and sets any required middleware.