React Redux | React Redux Tutorial | React Redux for beginners

REACT REDUX

GitHub Link : https://github.com/tinkugupta5/redux_projectone

Redux is a predictable state container for JavaScript apps.

Redux is a library for JavaScript Applications.
You can use Redux together with React, or with any other view library (Angular, Vue).Redux is just a state container.

In a easy way to understand redux imagine redux just like a store . On that shop which type of items present in that shop we called it as a state.

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

Action : Describe the changes in the state of the application

Reducer:

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

BookReducer.js

BookReducer.js

import { buy_book } from "./BookTypes"
const initialState = {
    NumberOfBooks: 20
}

const BookReducer = (state = initialState, action) => {
    switch (action.type) {
        case buy_book: return {
            ...state, NumberOfBooks: state.initialState - 1
        }
        default: return state
    }
}

export default BookReducer;

Redux Store

let's jump into store creation. We will understand the concepts of store and how to create a store in redux.


• The entire Application contains a Single Store.
• Store consists some methods like :

* getState()
* subscribe(listener)
* dispatch(action)

• It is responsible for holding the application state. getState() method gives access to state it holds.
• dispatch(action) method allow state to be updated.
• It has subscribe(listener) method as well by which we can register listeners.
• This method accept function (listener) as a parameter which execute anytime when the state in redux store changes.

Now let's Jump into coding part so now we have successfully created action reducer and store and Types now next turn is we have to create a store file that holds the entire state of the application.
As we all know for creating a store we have a function called createStore which holds two parameter reducers like i have mentioned in the below code.

Store.js

import {createStore} from 'redux'
import BooksReducer from './BookReducer'

const Store = createStore(BooksReducer)


export default Store;

Next step is to pass the whole data across the application so to do that we have provider for passing which is given by react-redux library and in it we have to pass it as a props like below code.

App.js

import logo from './logo.svg';
import './App.css';
import { Provider } from 'react-redux';
import Store from './reduxContainer/Store';

function App() {
  return (
    <Provider Store={Store}>


    </Provider>
  );
}

export default App;

Now lets us understand some hooks that help us to change our state value by using these hooks.


React Redux Hooks

React Redux offers set of hooks to - subscribe to redux store and dispatch actions.Some of the hooks are as follows.

useSelector Hook

useSelector is a hook react-redux library provides to get hold of any state that is maintained in the redux store.

 Syntax - const xyz =useSelector (selector: Function, equalityFn?: Function)

Selector function accepts the redux state as its argument and returns a value.

Now lets access state value lets jump into file . we have to create a compoennt which is called BookContainer.js for rendering the initial state value as you can see in the image how can we access the initial state.

BookContainer.js

import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import purchase_book from './BookAction'

const BookContainer = () => {
    const noofBooks = useSelector(state => state.NumberOfBooks)
    const dispatch = useDispatch()

    const handleBuy = () => {
        dispatch(purchase_book())
    }


  return (
    <>
    <div>BookContainer</div>
    <h2>No of Books - {noofBooks} </h2>
    <button onClick={handleBuy}>Buy Book</button>
    </>
  )
}

export default BookContainer

Output :

So with the help of useSelector method how we access the state in react redux with the help of hooks. Now lets jump to new hook which is useDispatch previously we have only access the state from store but with the help of useDispatch we will update that state.