Core Concepts of Redux

Store - Holds state of your application
Action - Describe the changes in the state of the application
Reducer- Actually carries out in the state transition depending on the action

Rule of Redux

• The state of your application is stored in a object tree within a single store
  { NumberOfBooks:10 }

• The only Way to change the state is to emit an action, an object describing what happened
  {Type:"buyBook"}

• To specify how the state tree is transformed by action, we write a pure reducer

Let's use in the React application

i have already created my react application through npx create-react-app myapp

Redux Installation and Practical in Coding

To install Redux in your react project you have to type this command in your react application.
npm install redux react-redux

Step 1

1. With respect to the above image first step is to created our React application which we have already done with the command npx create-react-app projectname

Step 2

1. The Second Step is to install Redux or react redux pakage because we are using this redux in our react application that why we wrote this command for installing the redux. npm install redux react-redux

Step 3

1. Now Third step To update our store we have to make a action so that this will instruct the reducer what we have to change in store. Let's understand more about actions Action In Redux

• 1.Action are javascript objects that contain information.

• 2.Action are the only source of information for the store,it
  only tells us what has happened.

• 3.Action have a type property and it should be define in string
  constraint.

• 4.It is compulsory to include the type property in the Object.

Syntax

const Action = {
type:''
}

I have created a folder reduxContainer Under this I have created two files for Action first one is BookTypes.js and the Second one is BookAction.js.

In BookTypes.js i have defined a constant for our action so that we can import this file in Our BookAction.js file.
BookTypes.js

File Name : BookTypes.js

export const buy_book = 'buy_book'

Let's jump into another file which is BookAction.js where we have to use the above const value because this Type value we have to define as a constant.

File Name : BookAction.js

import { buybook } from "./BookTypes"
const purchase_book = () => {
    return {
        type : buybook
    }
}

Step 4

Let's Jump into next step 4 which is Reducers. Before jumping to Reducer coding part lets understand some concept about reducer so that you will understand it clearly .

1. Reducers decides how the state of application changes depending upon the action sent to the store.

2. Reducers are the function that accepts state and action as parameter and return the next state of the application.

(previousState,action) => newState

To be cont... in a few day !