An Intro to Redux that you can understand

Hi Guys!

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

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

Comments

[Maciek Grzybek]

Awesome article mate :)

[Mark Abeto]

Thanks! I'm glad that you like it.

[Mervin]

Nice work.
It's good to see a schoolmate here :D

I saw that you are a Computer Engineering. Are you still doing some pet jobs on arduino and python?

[Mark Abeto]

Hi Mervin! What's Up? I haven't tried using Arduino but we used Raspi with Python on my thesis. Mostly I'm in web development now.

[Naveen Bharathi]

Awesome dude

It's the most easiest and less complex article about redux I've seen on the internet.

👏🏻

Can you suggest a basic react template that makes use of redux...

[Mark Abeto]

Sorry, it took me a long time to reply to you, Ok, I'm gonna make a post that makes use of React and Redux.

[louissasha]

Great read thanks👌🏾

[Nicholas Cloud]

Thanks for the article! Any good example projects you can recommend that show good patterns for using Redux?

[Mark Abeto]

Hi, Ok I have a big project that uses Redux but we're not allowed to show anyone the source code due to the reason of rules. Basically, the project is an eCommerce app that can add products, delete products, edit products, and view orders. That's all I can say. But remember if you have trouble managing data in your web app because of the size maybe it's a good time to try Redux or any State Management Library.