REDUX
Published: 2022-01-19 19:53:31

> 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
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8w6c64zrryxnlvmiw6kv.png)

# 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 of` createStore` method it takes reducer as an argument
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qnxy4og4rteero0mub74.png)
 

> 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 import` combineReducers` 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 <Provider> 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.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6oyaxbrdd7xefhc1zeup.png)
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.

💙