Nextjs
Published in

Nextjs

How to use Redux and Redux tool kit in nextjs?
How to use Redux and Redux tool kit in nextjs?

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

I create a dark mode project in the demo project with nextjs and redux. You can enable and disable dark mode with redux.

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-react-app my-app
# Redux + Plain JS template
npx create-react-app my-app --template redux
# Redux + TypeScript template
npx create-react-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-reduxoryarn add @reduxjs/toolkit react-reduxorpnpm 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.

Conclusion

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

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rajdeep singh

Rajdeep singh

525 Followers

JavaScript || Reactjs || Nextjs || Python || Rust || Biotechnology || Bioinformatic || Front-end Developer || Writer || https://officialrajdeepsingh.dev/