How to Use Redux With Next js.

#nextjs #react #redux #javascript

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.

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

You have seen this type of UI in the browser.

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

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

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

pages/posts/index.js

Let's now add three buttons ADD , EDIT and DELETE so we can have output as below:

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

pages/posts/index.js

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

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

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