How to Use Redux With Next js.
Tags: nextjs, react, redux, javascript
Published: 2023-07-19 06:22:29

**Next.js: The React Framework**

- **Next.js** is the React Framework. Next.js provides a solution to all of the above problems. But more importantly, it puts you and your team in the pit of success when building React applications.

**Redux : The State Management Library**
- **Redux** is one of the most popular state management solutions in the React ecosystem. Nowadays, there are plenty of alternatives, but Redux is still the most trusted and widely used tool.

So, Let's Start integration of **Nextjs + Redux** firstly setup the project in **VsCode terminal**.

Here I have create CRUD using Nextjs with Redux and here we use **Redux-wrapper** for Wrapping our component in Store.

**Steps for Setting up Nextjs Project**

- To create a Next.js app, open your Vscode terminal and run the following command:

> **npx create-next-app@latest nextjs-blog --use-npm --example** "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"

- You now have a new directory called nextjs-blog. Let’s cd into it:

> **cd nextjs-blog**

- Then, run the following command:

> **npm run dev**

This starts your Next.js app’s **development server** on port 3000.

You Can see this type of Structure.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/72ywsdj4tzr53r7ww07z.PNG)

After **npm run dev** the development server is started on port 3000

You have seen this type of UI in the browser.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rg1scderk0iiib34bomx.PNG)

Now here we are apply Some changes in Structure

We Create Component and Redux directory and add some npm packages to the Vsterminal.
```
npm i -D tailwindcss react-redux redux-thunk formik yup next-redux-wrapper react-toastify Reactstrap
```
In Pages Directory create **_app.js** and paste the code

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/247qxwhat7aitzn9g3u8.PNG)

here we create posts directory in pages and add index.js file in pages directory, here we can fetch list of Product from Fake Store Api website with the help of redux.

**Fake Store Api** - https://fakestoreapi.com/docs
First Wrap your Nextapp to redux-wrapper 

**1. Create store.js file in redux folder** 
**2. import applyMiddleware, legacy_createStore as createStore from 'redux'**
**3. import createWrapper, HYDRATE from 'next-redux-wrapper'**
**4. import persistStore, persistReducer from 'redux-persist'**
**5. import storage from 'redux-persist/lib/storage'**
**6. import thunk from 'redux-thunk'**

We can crate **makeStore** function to use store and apply changes to **store.js** and **_app.js** file

- **store.js**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m2net601a2gf7nylfyxy.PNG)

- **_app.js**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iwjb4spiu3kcprzys2zo.PNG)

To More about **redux-wrapper** in Nextjs you should refer https://github.com/kirill-konshin/next-redux-wrapper

- **pages/posts/index.js**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3an4twum343cdofywi5m.PNG)

Let's now add three buttons ADD , EDIT and DELETE so we can have output as below:
							
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b94l8umyke4qt9wvamuz.PNG)



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8i0lsjo3c7ovsiz0z6tj.png)

Now Let's Create Delete Component.Here I have used reactstrap to show confirmation modal to delete Product

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ek641aq5sb6gg0qjtmw.PNG) 

- **pages/posts/index.js**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oqyrvvg2j2y0njvl9r8n.PNG)

- Let's Add Some code to **Fetch Product** and **Delete Product**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xcoativufvjic9dir126.PNG)

In store.js file we can see that we use **HYDRATE** in switch case because it's each time when pages that have **getStaticProps** or **getServerSideProps** are opened by user the HYDRATE action will be dispatched.

- To more about **HYDRATE** you can refer https://github.com/kirill-konshin/next-redux-wrapper
 

- **pages/posts/deletecomponent** 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x5pdk5sd782r0m9phynm.PNG)

- **Now,Lets Add and Edit Product**


- We can add button edit left to the Delete and Add Product Top to the list and create Addeditcomponent in **pages/posts/addeditcomponent.js**


- Here We can Create Common form for AddEditComponent and Common form for Add and Edit I have used **formik** and **yup** for form validation


- Depends on visible id we can dispatch actions. If we got the id in visible props then we can edit Product but if can't get id in visible props then we can add Product

- **pages/posts/addeditComponent.js**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5qnjzee7arb0ky9qzphy.PNG)



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gghscpykawem0iybx1bd.PNG)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s744npswfx4aydor1tkd.PNG)



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2hs9znq4o8movkzfhb9a.PNG)



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kjxe6q476ead0iy800g4.PNG)

- Now Update the reducer in store.js file for ADD and EDIT

**redux/store.js**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4gy8gjykl79jvca7dl1y.PNG)
 
 So here that's the way to implement Nextjs in Redux. I hope guys this article is helpful to you.