Redux is a powerful state management library primarily used in JavaScript applications, particularly those built with frameworks like React. At its core, Redux provides a predictable state container for managing the state of an application in a more organised and centralised manner. It operates on a unidirectional data flow model, which helps in maintaining the consistency of application state and facilitates easier debugging and testing.
Elattar Saad
Thu, 15th February 20247 min read
What is Redux, and why we use it?
Redux is a powerful state management library primarily used in JavaScript applications, particularly those built with frameworks like React. At its core, Redux provides a predictable state container for managing the state of an application in a more organised and centralised manner. It operates on a unidirectional data flow model, which helps in maintaining the consistency of application state and facilitates easier debugging and testing.
Redux is used for several reasons:
It promotes a single source of truth for application state, meaning that all the state of an application is stored in a single object called the Redux store. This makes it easier to manage and access the state from different components throughout the application, reducing the chances of inconsistencies or conflicts between different parts of the application.
It facilitates predictable state changes through the use of pure functions called reducers. Reducers take the current state and an action as input and return a new state based on that action. This deterministic approach to state changes makes it easier to understand how the state of an application evolves over time, making debugging and reasoning about the application's behaviour more straightforward.
It enables efficient data flow and communication between different components of an application. By dispatching actions to update the state, components can stay decoupled from each other, leading to a more modular and maintainable codebase.
Redux Elements
1. Store
A Redux Store is the global state tree of the application in which all the global states of the app are stored, check out more about Redux Stores.
2. Actions
The Redux Actions are the operations (events) to be performed on the store. A set of update changes, Know more about .
Written by
Saad Elattar
Software engineer passionate about building scalable systems, exploring new technologies, and sharing knowledge through writing.
Redux Reducers are functions that take a state and an action as arguments and returns a new state which will be overriding the previous one.
Example
In a Counter App, the store will have a counter state (with number value), an action incrementing/decrementing the value, two reducers to handle the actions and return a new state for each action.
Project Setup
For this project, we'll be using:
NextJs version 14.1.0 with React version 18 .
react-redux version 9.1.0.
@reduxjs/toolkit version 2.2.1.
Let's install all the dependencies starting with the new Next project:
I'll be using TypeScript and tailwind css, you can config that while executing the previous command.
Now, let's install the redux dependencies:
The redux toolkit will help us setup the redux elements with less boilerplate code. You can know more about the Redux Toolkit here.
Setting up Redux Store
In a folder called "redux", create a file under the name "store.ts":
The dispatch a function of the Redux store which we call to dispatch an action and eventually trigger a state change.
Now, we create a slice which is a collection of reducer logic and actions for a single feature in your app, in our redux/userSlice.ts file will define the user feature we need to create, starting with a simple typescript interface shaping the structure of the user state:
Then we need to define the initial value of our state:
Now it's time to create our slice, in which will define our actions and reducers:
We need to export the actions and the slice reducer:
Next, we add our slice reducer to the store, the store.ts file should look like this:
Since, React cannot communicate directly with the Redux store, we need to add the Redux provider at the root our app:
Setting up the UI
For the UI, will be having a simple user edit and profile sections.
Let's create a user profile component, in the components folder, create a file called UserProfile.tsx with the following code:
Next let's create the UserEdit.tsx component:
All we need now is to add the two components to the main page app/page.tsx, let's create a components/index.ts file:
As you saw, the operations we performed are synchronous, in real-world use cases we must deal with async operations such as Api calls and IO processes.
Setting up an async action is the next step, it will focus on the "unverification", we turn the user status from verified to unverified.
In the userSlice.ts file, we create and export the action:
Then in the userSlice const, we can add the async action using the extraReducers property.
In the UserEdit.tsx, we need to add another button which will dispatch the async action we just created:
Also on the UserProfile.tsx, we need to make use of the user.isLoading property:
After the new tweaks, we should be having a similar page:
Finally,
As a personal opinion, I believe Redux is huge help when it comes to state management, especially in large and complex projects, this article only serves as a simple getting-started PoC :))
