An Intro to Redux that you can understand

An Intro to Redux that you can understand

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.

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

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

ReactJS Web App Development Services

We provide top-notch ReactJS development services to global clients. Hire expert ReactJS developers from top React JS development company, Skenix Infotech.

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Top Reasons to Choose ReactJS for Web App Development - TopDevelopers.co

ReactJS, a JavaScript library that helps developers to build SEO Friendly web apps. Get to know more about ReactJS and why it is a good option for your next project.

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

Hire Dedicated eCommerce Web Developers | Top eCommerce Web Designers

Build your eCommerce project by hiring our expert eCommerce Website developers. Our Dedicated Web Designers develop powerful & robust website in a short span of time.