Originally published by Mark A at dev.to

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 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.

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.

    // 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.

   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.

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 Conveyorit’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.

Originally published by Mark A at dev.to

=======================================================

Thanks for reading :heart: If you liked this post, share it with all of your programming buddies! Follow me on Facebook | Twitter

Learn More

☞ Understanding TypeScript

☞ Typescript Masterclass & FREE E-Book

☞ React - The Complete Guide (incl Hooks, React Router, Redux)

☞ Modern React with Redux [2019 Update]

☞ The Complete React Developer Course (w/ Hooks and Redux)

☞ React JS Web Development - The Essentials Bootcamp

☞ React JS, Angular & Vue JS - Quickstart & Comparison

☞ The Complete React Js & Redux Course - Build Modern Web Apps

☞ React JS and Redux Bootcamp - Master React Web Development

#redux #javascript #web-development #reactjs