nextjsreduxredux toolkittypescript

NextJs meets Redux: A simple user PoC

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

Get in touch

npx create-next-app@latest nextjs-redux-poc-user-profile

npm i react-redux @reduxjs/toolkit

npx create-next-app@latest nextjs-redux-poc-user-profile

npm i react-redux @reduxjs/toolkit

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;

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;

redux/user/userSlice.ts

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

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

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

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/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;

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';

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

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

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

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

}

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

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

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

NextJs meets Redux: A simple user PoC

What is Redux, and why we use it?

Redux Elements

1. Store

2. Actions

Saad Elattar

Keep reading

A gentle introduction to eBPF: Zero-Code Observability for Java

The End of Reactive? How Java Virtual Threads Are Making Complex Concurrency Simple Again

2. Reducers

Example

Project Setup

Setting up Redux Store

Setting up the UI

Setting up Async operations

Finally,