State management is hard. When the app state becomes unpredictable it leads to all kinds of UI errors. But it doesn’t have to be this way. In this post, we’ll see how to solve this problem using state machines.

The Problem with state management


Redux is a very good option for managing state, but in redux, we can dispatch any action at any time. Redux is not opinionated about should be the end result of those actions. Its job is just to handle state operations in an orderly synchronous fashion.

In my one project, I faced an issue with my payment module was for creating…

Nowadays, Redux saga became the most popular library to handle asynchronous requests and control the application flow in redux, so In this article, we will discuss what is redux-saga, what is the benefits of using it, and also discuss how to use redux-saga.

What is a redux-saga?

Redux-saga is a middleware which is handle side effects and asynchronous request in redux.


Redux without redux-saga

Action(s) -> Reducer(s)

Redux with redux-saga

Actions(s) -> Redux saga -> Reducer(s)


Generators are the core concept of the redux-saga so before discussing how redux-saga works, we need to understand what is generators and how it works?

Generators are functions that can be…

There are so many new things that have come out recently, to help developers write better code in the react. But as with everything, there is no “silver bullet”. Everything has a cost and we need to be smarter about evaluating the tools we use.
So let’s start…….!!!!!

High order component

HOC technique to reuse a component logic in react, and basically HOC is a function that takes a component and returns a new component.
and it’s very helpful for reuse the component logic and render hijacking let’s check for example.

const nameHoC = WrappedComponent => {
return class extends…

One way data flow in React help us to build scale-able and compose-able UI component, but managing to state and UI separation logic not handle properly using Class Component.

Class Component?
class syntax is one of the most common ways to define a react component,
class component has some additional features like handle life-cycle methods, state manipulation.
Previously we must need to use class component instead of function component if we require to use life-cycle methods or state manipulation.

Problem with the Class component?
There are so many lines of code when we write a class component and also include some…

Chirag Patel

Software developer, Love Programming, Work in React, Redux, Javascript, PHP. Next goal to learn Go/Ruby

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store