NextJs App-Router Redux Guide

Introduction of React-Redux

Redux is a predictable state container designed to help you write Typescript apps that behave consistently across client, server, and native environments, and are easy to test. While it's mostly used as a state management tool with React, you can use it with any other Typescript framework or library.
if you are using Redux with any kind of UI framework, you will normally use a "UI binding" library to tie Redux together with your UI framework, rather than directly interacting with the store from your UI code.

For better understanding Redux we suggest you once go through official documentation of Redux from Redux Documentation

Getting Started

Setting up the redux environment to workspace

This guide explains how to set up your environment for react development using the React-redux tool. It includes information about process of installing, creating an dynamic workspace or a e-commerce web Application.

Redux Setup

Create a dynamic workspace or a E-commerce web application

You need to have those package, just follow the below steps

  1. Run the command , as shown below

  2. First step :
    npm install redux redux-devtools-extension redux-thunk
    

  3. This new command prompts for the information about installs the necessary redux packages and other dependencies. This can take a few minutes.

  4. Second step:
    create three indivisual js files in your workspace such as : "Action","Reducer","Store"

    Action is use for, create a action for indivisual functionality, which wil return the action type, and if action contains the payload, and also it returns the payload.

    Reduce is use for, to creating the action functionality and it is always wait for the action type and the reducer we will import in the redux-store file.

    Store is the middleware of connecting the components to redux. we will import the store in the main layout file(App.tsx),
    which will wrap the store in the react-redux provider just like;

    <Provider store={store}></Provider>.