An Intro to Redux that you can understand
Tags: redux, webdev, functional, javascript
Published: 2019-08-09 06:24:04

###Hi Guys!


[Redux](https://2018.stateofjs.com/data-layer/overview/) is the most popular state management library at the time of this writing.
Partly because it is mostly used with the most popular framework [__React__]
(https://insights.stackoverflow.com/survey/2019#most-loved-dreaded-and-wanted).


So what is __Redux__? It's a predictable  __State Management__ Library for JavaScript Applications. It implements a __Unidirectional Flow__ in our application. It is based on [Facebook's Flux](https://facebook.github.io/flux/) an application architecture on how to build client-side apps but has some differences. It can be used in the Client-side or Front-End, Server-side or Back-End or Native Applications in Mobile.

So what's __State Management__? obviously, it refers to the way on how we manage our state or data in our apps. Due to the reason that our UI or view, depends on our state or data our __state management__ must be easy to implement and easy to understand.

So what's __Unidirectional Flow__?  It means that our application data will follow in a one-way binding data flow. Look at this picture below.
![Redux Flow](https://thepracticaldev.s3.amazonaws.com/i/qstvf9u1i40d4ll1nx4y.png)
We can't directly go to the __Reducer__ from our __UI__ we must first trigger an __Action__ or sent an __Action__ to the __Store__ we must go through first to the __Reducer__ this is what __Unidirectional Flow__ means the process goes one way.



###Redux Main Concepts

__Store__ - people sometimes confused the words __Store__ and __State__ and thinking they're the same thing but that's not it. The __State__ is our application data and the __Store__ is the container that holds the __State__ and it has some necessary methods to interact with it. 

__Action__ - The only way that we can update or change our state is through an __action__. Basically, it is an object that tells the __Reducer__ function what change or changes do we want in our __State__. The only required property in an __Action__ is the __type__ property.


```javascript
    // Sample Action without data
    const toggleAction = {
       type : 'TOGGLE_MODAL'
    };
    
    //Sample Action with data
    const updateAction = {
       type :'UPDATE_DATA',
       payload : {
          datas: []
       }
    }
```

If you're using this in different components and you realize that you're repeating this piece of code everywhere it would be better if we made functions that return these objects and make constant action types so that we can avoid misspelling action types. 
Theses functions are called __Action Creators__ and types called __Constact Action Types__.


```javascript
   const types = {
       TOGGLE_MODAL : 'TOGGLE_MODAL',
       UPDATE_DATA : 'UPDATE_DATA'
   };

   const toggle = () => ( {type:types.TOGGLE_MODAL} );
   
   const updateData = (data) => ( {type:types.UPDATE_DATA, payload:data} );

```



__Reducer__ - This is a function that updates the state based on the action given and returns the new state. It is a __Pure function__ what this means that the return value of this function is solely based on the arguments that are given to it, it does not have side effects to it, does not mutate the arguments that are passed to it and does not access any variables on its outer scope.


```javascript 
 
    const types = {
       TOGGLE_MODAL: 'TOGGLE_MODAL',
       UPDATE_DATA: 'UPDATE_DATA'
    };

    const initState = { datas: [], isModalOpen: false };

    function reducer(state = initState, action) {
       switch (action.type) {
          case types.TOGGLE_MODAL:
            return { ...state, isModalOpen: !state.isModalOpen };
          case types.UPDATE_DATA:
            return { ...state, datas: action.payload };
          default:
            return state;
       }
     }

```


This is a sample template of a reducer if your states have many properties then
you might have many action types then maybe it's a good time to separate them in another file.

I have an analogy for these concepts. Basically, The __Old State__ is your Current Car. The __Store__ is like a __Car Wash__. The __Reducer__ is like a __Conveyor__ it's a tunnel-like where you go through and an __Action__  is any of those things inside the __Conveyor__ like a __Rotating Brush__, a __Drying Blower__, __High pressure arches__ that produces high-pressure water on the car or any cleaning process that happens in the __Conveyor__ is an __Action__. After all the processes are done in the __Conveyor__ you get the  __New State__ of your Car.


Using Redux may be overkill in some situations like if you're creating an application with few data in it then don't use Redux but if you have a big application with lots of data then Redux __might__ be a solution for you.


####Thank guys for reading this post.

# Have a Nice Day :smiley:!.