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 Redux Actions.
2. Reducers
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:
npm i react-redux @reduxjs/toolkit
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":
redux/store.ts
import {configureStore} from "@reduxjs/toolkit";
export const store = configureStore({
reducer: {
// since we don't have any slice reducers, will pass an empty object.
}
})
// we need to export the reture type of the getState() using the TS's ReturnType Utility.
export type RootState = ReturnType<typeof store.getState>;
// Also we need to export the type of the store dispatch as well.
export type AppDispatch = typeof store.dispatch;
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:
redux/user/userSlice.ts
interface UserState {
name: string;
email: string;
isVerified: boolean;
isLoading: boolean;
}
Then we need to define the initial value of our state:
redux/user/userSlice.ts
const initialState: UserState = {
name: 'n/a',
email: 'n/a',
isVerified: false,
isLoading: false // The loading will be used for the async behaviour
}
Now it's time to create our slice, in which will define our actions and reducers:
redux/user/userSlice.ts
import { PayloadAction, createSlice } from "@reduxjs/toolkit";
const userSlice = createSlice({
name: 'userSlice',
initialState, // The user initial state.
reducers: {
/*
The verify reducer is using the current state as an argument and perfoming
a logic to create a new state with new changes.
*/
verify: (state: UserState) => {
state.isVerified = true;
},
/*
Just like the verify reducer, the edit name and email reducers are creating a new state with
the new name, also the value of the name is retreived from the action payload.
Next, we add our slice reducer to the store, the store.ts file should look like this:
redux/store.ts
import {configureStore} from "@reduxjs/toolkit";
import userReducer from "@/redux/user/userSlice";
export const store = configureStore({
reducer: {
user: userReducer
}
})
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
Since, React cannot communicate directly with the Redux store, we need to add the Redux provider at the root our app:
app/page.tsx
'use client';
import { store } from "@/redux/store";
import { Provider } from "react-redux";
export default function Home() {
return (
<Provider store={store}>
<h1>Home</h1>
</Provider>
);
}
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:
components/UserProfile.tsx
'use client';
import { RootState } from "@/redux/store";
import { useSelector } from "react-redux";
export const UserProfile = () => {
// The useSelector hook is used to retrieve the state from the store.
const user = useSelector((state: RootState) => state.user);
// Show a status with a specific status based on the user.isVerified value
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:
redux/user/userSlice.ts
export const unverifyAsync = createAsyncThunk(
"userSlice/unverifyAsync",
async () => {
// Simulating the time we wait for a real async operation.
await new Promise((resolve) => setTimeout(resolve, 2000)); // 2s
}
);
Then in the userSlice const, we can add the async action using the extraReducers property.
redux/user/userSlice.ts
extraReducers: builder => {
/* The async action is exposing 3 status which we will need to handle
its behaviour: the pending (when loading), rejected (when error) and fulfilled
(when success).
Also for this one, we can use the action as argument and retreive the payload
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 :))
