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
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
- Now Update the reducer in store.js file for ADD and EDIT
redux/store.js
So here that's the way to implement Nextjs in Redux. I hope guys this article is helpful to you.
Top comments (0)