Redux Concept in Vanila JS
Published: 2020-07-20 12:48:47

####**Why we need Redux?**
👉 Why we need to maintain Parent-Child Relationship?
👉 Why should you been using Redux With Angular instead of service?
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zasf4pukod04ra58lhd9.PNG)

These scenarios are actually very common, so there is our answer.
💪 Useful for sharing data between components without any hierarchy.
💪 The use of "pure" reducer functions makes logic easier to test.
💪 Predictable state updates makes easier to understand data flow in our application.

####**What is Redux?**
_The official documentation says_
 Redux is a predictable state container for JavaScript applications. 

Simply, Redux is a **state Management tools**. Most of all aware, State is an object that holds application information and also it is **immutable**. We can simply say, state should never be altered/changed directly but rather, changes should be made to a copy of the current version of the state.

Redux mostly used with react, but it can also use with any javascript frameworks or library.

####**Principles of Redux?**
🗡Single source of truth - entire state of application is stored in one object.
🗡State is read-only
🗡Changes are made with pure functions - easier to test and debug

####**Data Flow Of Redux**
![Alt Text](https://miro.medium.com/max/2732/1*2CvHJZO7x7bYMu87Occhpw.png)

####**Building Parts Of Redux**
🐱‍🏍 Action
🐱‍🏍 Reducer
🐱‍🏍 Store
![Alt Text](https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/44e53712-498d-400f-8967-8ed0dbdb90a1/new-redux-data-flow-large-opt.png)

####**Action**
Actions are used to send information from the application(user interactions, internal events such as API calls, and form submissions) to the store.
Actions are simple JavaScript objects that holds type property (usually constant), describing the type of action and payload of information being sent to the store.

<pre>
 {
    type: 'ADD_NAME',
    payload: name
  }
</pre>

_Action are created with action creators._ Generally to reuse actions only we are using action creators. Action creator purpose is mainly used to return the action object.

<pre>
function add_Name(name){
  return {
    type: 'ADD_NAME',
    payload: name
  }
}
</pre>

####**Dispatch**
 Whenever user need to change/update the state of application, we need  to dispatch an action. Hence, **Dispatch means sending off the action to reducer**
 Dispatch takes a single argument which is an action object.

<pre>
const el=document.getElementById('add')
  el.addEventListener('click', () => {
    const name=document.getElementById('input').value;
    store.dispatch(add_Name(name));
    document.getElementById('input').value='';
  });
</pre>

####**Reducer**
💪 State is Ready-only
💪 Reducer are pure javascript function, means they cannot modify the input data.
💪 The reducer receives the current state or initial state and an action as an arguments and, using the action’s payload, it __generates a new state__ that updates the application’s state. 

<pre>
(previousState, action)=> newState 
</pre>

Also, a reducer is commonly handled with a switch statement, to act according to the received action:

<pre>
const initialState=[];
const reducer=(state=initialState,action)=>{
  switch(action.type) {
    case 'ADD_NAME':
      return [...state,action.payload];
    default:
      return state;
  }
}
</pre>

####**Store**
The store is the central objects that holds the state of the application. Store provide the basic API as follows:
👉 Allows it to access that info through the getState() function.
👉 Allows the state to update with the dispatch() method.
👉 Registers listeners with the subscribe (listener) function.
<pre>
store.dispatch(action)
store.subscribe(listener)
store.getState()
</pre>

The store is created by using the createStore method from the Redux library.
<pre>
const store = createStore(reducer);
</pre>

####**Putting It All Together**

{% codepen https://codepen.io/dineshk033/pen/qBELEbd default-tab=js,result %}