NextJs meets Redux: A simple user PoC

Elattar Saad

Thu, 15th February 2024

7 min read

#nextjs #redux #redux toolkit #typescript

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 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:

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:

Our page.tsx should look like this:

When we run our app using the following command:

We should be a having a similar page on the http://localhost:3000:

NextjsRedux

Setting up Async operations

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:

NextjsRedux

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 :))

Please, find the source code repository here

NextJs meets Redux: A simple user PoC

Elattar Saad

Thu, 15th February 2024

7 min read

Read on Medium

#nextjs #redux #redux toolkit #typescript

What is Redux, and why we use it?

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:

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.

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:

Our page.tsx should look like this:

When we run our app using the following command:

We should be a having a similar page on the http://localhost:3000:

NextjsRedux

Setting up Async operations

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:

NextjsRedux

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 :))

Please, find the source code repository here

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;

redux/user/userSlice.ts

interface UserState {
    name: string;
    email: string;
    isVerified: boolean;
    isLoading: boolean;
}

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
}

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.
        */
        editName: (state: UserState, action: PayloadAction<string>) => {
            state.name = action.payload;
        },
        editEmail: (state: UserState, action: PayloadAction<string>) => {
            state.email = action.payload;
        }
    }
});

redux/user/userSlice.ts

export const { editName, editEmail, verify } = userSlice.actions;
export default userSlice.reducer;

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;

components/index.ts

export {UserProfile} from './UserProfile';
export {UserEdit} from './UserEdit';

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
    }
);

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
        is we need to.
        */
        builder
            .addCase(unverifyAsync.pending, (state: UserState) => {
                state.isLoading = true;
            })
            .addCase(unverifyAsync.fulfilled, (state: UserState) => {
                state.isVerified = false
                state.isLoading = false;
            });
}

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>
    );
}

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
    const showStatus = () => {
        return <span className={`text-${user.isVerified?'green':'red'}-500`}>{user.isVerified?'Verified':'Unverified'}</span>;
    }

    return (
        <div className=" w-full ">
            <h1 className="text-xl">Name: {user.name}</h1>
            <h1 className="text-xl">Email: {user.email}</h1>
            <h1 className="text-xl">Status: {showStatus()}</h1>
        </div>
    );
}

components/UserEdit.tsx

import { AppDispatch } from "@/redux/store";
import { editEmail, editName, verify} from "@/redux/user/userSlice";
import { useRef } from "react";
import { useDispatch } from "react-redux";

export const UserEdit = () => {

    // The useDispatch hook is used to dispatch the redux actions.
    // Note: the AppDispatch is not required for sync actions.
    const dispatch = useDispatch<AppDispatch>();

    // Just a simple two refs to retrieve the values of the inputs.
    const nameInputRef = useRef<HTMLInputElement>(null);
    const emailInputRef = useRef<HTMLInputElement>(null);

    return (
        <div className="w-full flex flex-col gap-5">
            <div className="flex flex-row gap-2 w-full">
                <input ref={nameInputRef} type="text" className="w-2/3 bg-gray-50 border border-gray-300 block  p-2.5 rounded" placeholder="New Name" required />
                <button className="text-white w-1/3  bg-blue-700 hover:bg-blue-800  font-medium text-sm px-5 py-2.5 text-cente rounded"
                    onClick={() => {
                        /*
                          On the click we check if the current ref is not null (type check)
                          then we dispatch the editName action with the new name as its payload.
                        */
                        if (nameInputRef.current?.value == null) return;
                        dispatch(editName(nameInputRef.current.value))
                    }}
                >Edit Name</button>
            </div>
            <div className="flex flex-row gap-2 w-full">
                <input ref={emailInputRef} type="text" className="w-2/3 bg-gray-50 border border-gray-300 block  p-2.5 rounded" placeholder="New Email" required />
                <button className="text-white w-1/3  bg-blue-700 hover:bg-blue-800  font-medium text-sm px-5 py-2.5 text-cente rounded"
                    onClick={() => {
                        if (emailInputRef.current?.value == null) return;
                        dispatch(editEmail(emailInputRef.current.value))
                    }}
                >Edit Email</button>
            </div>
            <button className="text-white w-full  bg-blue-700 hover:bg-blue-800  font-medium text-sm sm:w-auto px-5 py-2.5 text-cente rounded"
                onClick={() => {
                        /*
                          Just like the editName and editEmail we dispatch the verify event
                          only this time without a payload.
                        */
                    dispatch(verify());
                }}
            >Verify</button>
        </div>
    );

}

app/page.tsx

'use client'; // So the page will be rendered from the client side.
import { UserEdit, UserProfile } from "@/components";
import { store } from "@/redux/store";
import { Provider } from "react-redux";

export default function Home() {
    return (
        <Provider store={store}>
            <div className="flex flex-row w-screen mx-20 justify-center mt-20 gap-10">
                <UserEdit />
                <UserProfile />
            </div>
        </Provider>
    );
}

components/UserEdit.tsx

<button className="text-white w-full  bg-blue-700 hover:bg-blue-800  font-medium text-sm sm:w-auto px-5 py-2.5 text-cente rounded"
    onClick={() => {
        // Just like we did before, we dispatch the async action the same way.
        dispatch(unverifyAsync());
    }}
>Unverify (Async)</button>

components/UserProfile.tsx

const showStatus = () => {
    if (user.isLoading){
        return <span>Loading...</span>
    }
    return <span className={`text-${user.isVerified?'green':'red'}-500`}>{user.isVerified?'Verified':'Unverified'}</span>;
}

NextJs meets Redux: A simple user PoC

Elattar Saad

Thu, 15th February 2024

What is Redux, and why we use it?

Redux Elements

1. Store

2. Actions

2. Reducers

Example

Project Setup

Setting up Redux Store

Setting up the UI

Setting up Async operations

Finally,

Read next

NextJs meets Redux: A simple user PoC

Elattar Saad

Thu, 15th February 2024

What is Redux, and why we use it?

Redux Elements

1. Store

2. Actions

2. Reducers

Example

Project Setup

Setting up Redux Store

Setting up the UI

Setting up Async operations

Finally,

Read next