How to setup Redux-Toolkit in NextJS

A quick guide on how to install and use Redux-Toolkit in your project.

This is a state management library mostly used for its global state management capability of website on the browser.

In this tutorial, you’ll learn how to use Redux Toolkit in your NextJS application.

Golang & Linux ninja — Fig.1: Total Drama All Stars Redux B Beverly.

Installation

First, we’ll create a Next.js application and install the necessary dependencies. Run the commands below in your terminal:


    $ npm create-next-app@latest my-rtk-app
    $ cd my-rtk-app
    $ npm install @reduxjs/toolkit react-redux

You can now open the project in your preferred IDE. In the next section, we’ll learn how Redux works in Next.js and how to configure it for our application.

Store

At the root of the application, create a new directory and name it "lib". This directory will contain all of our Redux Toolkit logic.


    $ mkdir lib
    $ cd /lib

Create a new file for the store. You can name it anything, but for this application we’ll name it "store.ts". Open the file in your IDE, and now write code for our store function.


    import { configureStore } from "@reduxjs/toolkit"
    import CartSliceReducer from "./features/cartSlice"

    export const makeStore = () =>
    {
        return configureStore({
            reducer: {
            },
        })
    }

    export type AppStore = ReturnType<typeof makeStore>;
    export type RootState = ReturnType<AppStore[`getState`]>;
    export type AppDispatch = AppStore[`dispatch`];

Hooks

First, we’ll create a Next.js application and install the necessary dependencies. Run the commands below in your terminal:


    import { useDispatch, useSelector, useStore } from "react-redux";
    import { RootState, AppDispatch, AppStore } from "./store";

    export const useAppDispatch = useDispatch.withTypes<AppDispatch>();
    export const useAppSelector = useSelector.withTypes<RootState>();
    export const useAppStore = useStore.withTypes<AppStore>();

Slices & Reducers

First, we’ll create a Next.js application and install the necessary dependencies. Run the commands below in your terminal:


    import { createSlice } from "@reduxjs/toolkit";

    export const AppSlice = createSlice({
        name: "App",
        initialState: {
            count: 0,
        },
        reducers: {
            increment: (state) => 
            {
                state.count++;
            },
            decrement: (state) =>
            {
                state.count--;
            }
        }

    })

    export const {increment, decrement} = AppSlice.actions
    export default AppSlice.reducer;

Adding reduces to your store

First, we’ll create a Next.js application and install the necessary dependencies. Run the commands below in your terminal:


    'use client'

    import { useRef } from "react"
    import { Provider } from "react-redux"
    import { makeStore, AppStore } from "@/lib/store"


    export default function StoreProvider({
      children,}: Readonly<{children: React.ReactNode}>)
    {
        const storeElem = useRef<AppStore>(undefined);
        if (!storeElem.current) storeElem.current = makeStore();

        return (
            <Provider store={stroreElem.current}>
                {children}
            </Provider>
        )
    }

Provider

First, we’ll create a Next.js application and install the necessary dependencies. Run the commands below in your terminal:


    'use client'

    import { useRef } from "react"
    import { Provider } from "react-redux"
    import { makeStore, AppStore } from "@/lib/store"


    export default function StoreProvider({
      children,}: Readonly<{children: React.ReactNode}>)
    {
        const storeElem = useRef<AppStore>(undefined);
        if (!storeElem.current) storeElem.current = makeStore();

        return (
            <Provider store={stroreElem.current}>
                {children}
            </Provider>
        )
    }

Slice

First, we’ll create a Next.js application and install the necessary dependencies. Run the commands below in your terminal:


    import "@/app/ui/globals.css"
    import { Metadata } from "next"
    import StoreProvider from "./provider"

    export const metadata: Metadata = {
      title: "Simple NextJS app",
      description: "This is a simple NextJS App",
    };

    export default function RootLayout({
      children,
      }: Readonly<{children: React.ReactNode;}>)
    {
      return (
        <html lang="en">
          <body
            className={`antialiased`}
          >
            <StoreProvider>
              <main className="pt-36">
                {children}
              </main>
            </StoreProvider>
          </body>
        </html>
      );
    }

Interacting with the store and accessing state

First, we’ll create a Next.js application and install the necessary dependencies. Run the commands below in your terminal:


    import "@/app/ui/globals.css"
    import { Metadata } from "next"
    import StoreProvider from "./provider"

    export const metadata: Metadata = {
      title: "Simple NextJS app",
      description: "This is a simple NextJS App",
    };

    export default function RootLayout({
      children,
      }: Readonly<{children: React.ReactNode;}>)
    {
      return (
        <html lang="en">
          <body
            className={`antialiased`}
          >
            <StoreProvider>
              <main className="pt-36">
                {children}
              </main>
            </StoreProvider>
          </body>
        </html>
      );
    }

Conclusion

First, we’ll create a Next.js application and install the necessary dependencies. Run the commands below in your terminal: