How to use Redux and Redux tool kit in nextjs?

Nextjs + Redux + Redux Tool kit

How to use Redux and Redux tool kit in nextjs?

Adding the redux tool kit in nextjs is a straightforward process compared to react.js.

Redux tool kit provides more utility and easy configuration and setup for projects.

You can easily set up redux with a redux tool kit in the nextjs app. All configurations come within copy-paste code. You follow my articles, and in the end, you can also set up your redux store for your app.

Note

In this article, I do not explain redux, and the create Slice and configure store method in redux.

First, I suggest learning the basics of redux and following my article.

Demo

Combine the nextjs and redux to enable and disable dark mode with redux.

GitHub - officialrajdeepsingh/nextjs-redux-example

Steps

1. Install nextjs
2. Install Redux and redux tool kit
3. Create a store
4. Config the store in nextjs

Folder structure

.
├── icons
│   ├── moon-30.png
│   └── sun-24.png
├── next.config.js
├── package.json
├── package-lock.json
├── pages
│   ├── about.js
│   ├── _app.js
│   └── index.js
├── public
│   ├── favicon.ico
│   ├── icons8-moon-symbol-ios-glyph
│   ├── icons8-sun-material-outlined
│   └── vercel.svg
├── README.md
├── store
│   ├── icon-slice.js
│   └── index.js
├── styles
│   ├── globals.css
│   └── Home.module.css
└── yarn.lock
7 directories, 16 files

Install nextjs

Firstly, you install nextjs with the following command.

# Nextjs
npx create-next-app my-app 
# Redux + Plain JS template
npx create-next-app my-app --template redux
# Redux + TypeScript template
npx create-next-app my-app --template redux-typescript

If you already install nextjs in your project, then skip this section.

Install Redux and redux tool kit.

You install redux and redux tool kit with the following command in your nextjs app.

npm install @reduxjs/toolkit react-redux
or
yarn add @reduxjs/toolkit react-redux
or
pnpm add @reduxjs/toolkit react-redux

Create a store

After installing the redux tool kit, create a redux store in the nextjs app. I make a redux store in the store folder in my demo project.

import { configureStore } from '@reduxjs/toolkit'
import { createSlice } from '@reduxjs/toolkit'

// create a slice 
export const iconslice= createSlice({
name:"icon",
initialState:{
     icon:'moon'
},
reducers:{
     iconMoon:state=>{
        state.icon= 'moon'
     },
     iconSun:state=>{
        state.icon= 'sun'
    },
   }
})
// config the store 
const store= configureStore({
   reducer: {
      icon: iconslice.reducer
   }
})

// export default the store 
export default store

// export the action
export const iconAction = iconslice.actions

Config the store in nextjs

In the last step, you configure the store in the _app.js file. For configuration, you need a provider. The provider is a high-order component imported from the react-redux library. The provider accepts the store as a props for children component. Inside store props, you pass your store.

import '../styles/globals.css'
import { Provider } from "react-redux";
import store from "../store/index";
function MyApp({ Component, pageProps }) {
return <Provider store={store}>
           <Component {...pageProps} />
       </Provider>
}
export default MyApp

After the store is configured in your nextjs _aap.js file, then run the npm dev command.

References

GitHub - officialrajdeepsingh/nextjs-redux-example

Getting Started | Redux Toolkit

Conclusion

My article helps you to add redux and redux tool kit in your nextjs app. If you have any queries, me in the comment section.

You can follow and read more articles on officialrajdeepsingh.dev and follow on Twitter and Linkedin.

Read More content on Nextjs. Sign up for a free newsletter and join the nextjs community on medium.