REDUX

A predictable state application for JavaScript application
In Simple words-it provide one single place to store all the states and that place is known as store
Store : It is a single state object responsible for entire state of your application .This mean if you have react app with some components and each have its own state ,then the entire react state will be managed by the store. That means if we have to make changes in any of the state we can do it through the store only.

Data in redux flow unidirectional

Main Topics in Redux

Actions
Actions are basically JavaScript object .They just tell us what type of event is to be performed but they don’t tell us how to perform that particular event.

Reducers
These are basically the functions which perform the operation according to the type of action ,
it takes state and action as argument and return the updated state.

Store
The redux store brings together state , reducers and actions . This basically keeps the react-redux family together 💙

Syntax to declare store-const store=Redux.createStore(reducer);

To declare store in redux we make use ofcreateStore method it takes reducer as an argument

In my opinion learning is better when we learn something by working on it . So let my dive you through the counter project with the help of which your understanding of redux will hopefully get better.

Firstly will be creating our Actions

export const Incnumber=()=>{
return {
type:'increment'
}
}
export const Decnumber=()=>{
return {
type:'decrement'
}
}

So as you can see here I have created two function for incrementing(Incnumber) and decrementing(Decnumber) the value.

• Now moving to the next step creating the reducer file

const initialstate=0;
const changethenumber=
(state=initialstate,action)=>
switch(action.type){
case 'increment':
return state+1;
case 'decrement':
return state-1;
default : 
return state;
}
}
export default changethenumber;

So as we can see here reducer function taking argument state and action then according to the type of action changing the state.

Generally in complex application there are many reducer so to combine the all reducers into single reducer to send them to the createStore we make use of combineReducers.In order to do this will have to importcombineReducers from redux.

import changethenumber from './Updown'
import { combineReducers } from "redux";
const rootreducers=combineReducers({changethenumber})
export default rootreducers;

As we are set with Actions and Reducers its time to pass our reducer to store

import { createStore } from "redux";
import rootreducers from "./reducers";
const store=createStore(rootreducers, 
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
export default store;

Here first we are importing createStore from redux as we know it is used to define store and takes reducer as an argument.

• After setting our action ,reducer and store its time to provide our store to app

So, in this step will make use of component it males redux store available for any nested component.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import store from './store';
import {Provider} from 'react-redux'

ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
document.getElementById('root'));

as we have provided our store to app now we can access any state from the app.js itself .Once we are done with this, with the help of redux dev tool we can check the action ,state of our app in the console . As shown in the given image its showing our changethenumber reducer.

Here comes the use of useSelector and useDispath

useSelector

It takes state as an argument and return the data from state

useDispatch

It plays the important role it takes action object as an argument ,whenever we pass an action object the dispatch calls our reducer and passes in the current state to make changes in that state.

import './App.css';
import { useDispatch,useSelector } from 'react-redux';
import {Incnumber,Decnumber} from './actions/index'
function App() {
const mystate=useSelector((state)=>state.changethenumber)
const dispatch=useDispatch();
return 
(
<div className="container"><h1>Increament/Decreament Counter</h1>
<h4>Using React and Redux</h4>
<div className="quantity">
<a 
className='quantity_minus' 
title='Decreament'
 onClick={()=>dispatch(Decnumber()) }>
<span>-</span>
</a>
<input name='quantity' className='quantity_input' type="text" value={mystate} />
<a 
onClick={()=>dispatch(Incnumber()) } 
className='quantity_plus'
 title='Increament'>
<span>+</span>
</a>
</div>
</div>);
}
export default App;

As we can clearly observe in the app.js file that with the help of useSelector we have passed our

changethenumber reducer and with the help of dispatch we have passed the action object.

💙