Our project is getting bigger. This means more state and more state means more responsibility. If you have heard about redux, this is what we're going to use in our project. Redux has provided some guidelines to use it in an efficient way and we're going to follow all the guidelines. There are some essentials; some strongly recommended and some recommended rules. Below this, redux strongly recommends using Redux toolkit.

What exactly is redux-toolkit? We will look at it later, but for now, let's use it in the traditional way.

Let's install it first without wasting any time; open the terminal, go to the client project and write npm install redux react-redux

npm install redux and react-redux

Redux can be used with any javascript library and that's why we're separately installing react-redux as well. If you're not familiar with redux, I won't directly jump the gun and introduce redux-toolkit, so let's start with introducing Redux.

For this, we can use our LoginPage just to show the fundamentals — they are not required in the actual application. Inside the src folder, let's create a new folder, redux, and inside, we need a new file which will be called loginReducer. For now, let's maintain a state which will be the number of visits by a user. In state, we also need to provide an initial state, so let's do that now. Export const initialState and this will be of type LoginState and the initial value of the visit will be 1.

Now we need to create our reducer function, so we will write export default function counterReducer. It will take state and action as a dependency. State can have a default value of initialState and action. It complains about the action type, so let's give it a type any for now. By the actions are the values which change the state. But we will talk about them soon. For now in this function, let's simply return the state.