Mindbrews Podcast coming in Soon! Stay Tuned!

Developers & Open Source

Manage your React State better with Redux

Managing shared states in React can be a challenging task, you just keep on passing the props one component to another. But there’s a better way to manage these shared states in React! This article will introduce you with Redux, a predictable state container for Javascript apps, and how you can use it in React.

Redux is a predictable state container for JavaScript apps

What is Redux?

In simple words, Redux is a way to store state(data) in a very effective way. In Redux there one Global state(also known as Store) were everything is managed for One project. While a developer can choose to add more Global states.

Redux was created by Dan Abramov and Andrew Clark in 2015. Abramov began writing the first Redux implementation while preparing for a conference talk at React Europe on hot reloading. Abramov remarks, “I was trying to make a proof of concept of Flux where I could change the logic. And it would let me time travel.

But, what’s wrong with react way saving state. In react state in used by the component itself and if any other component want to access that data The component should be children of that and when you have very big app. You won’t be able to know find out who is changing the state.

So, redux have some every effective ways to solve this problem.

  • Redux says the Store should be Global within the app itself.
  • Global state(known as Redux Store) should be updated in one place.
This is how react state looks like before and after Redux.

The Three Principals of Truth:

Single source of truth

The global state of your application is stored in an object tree within a single store. Single source of truth simply means that there will be one Store which will be considered as truth and all the data of the app will be managed there. There are ways to watch that data or update that, which we will learn.

State is read-only

The only way to change the state is to emit an action, an object describing what happened. That means you Can’t Update the Redux Store directly you will have to all an action also called as emit an action that will update the redux store with the help of pure functions which we will learn what they are in next section.

Changes are made with pure functions

To specify how the state tree is transformed by actions, you write pure reducers.Functions map input arguments to return values, meaning that for each set of inputs, there exists an output

Example: Math max is example of pure in javascript.

Here is how things work with Redux:

An action is called then reducer update the redux store which then can be subscribed to read Store.

Math.max(2, 8, 5); // 8
How things work in React

Little More on How to update Redux Store….

To Update the Redux Store there is a very simple way. let me explain in very simple words.

Whenever you want to update the store you call action, the action will then do little checks and will call reducers as you can see in above picture. Then reducer will Update the Redux Store. TaDa!!!

But how would you access the store for that, to access the store you can simply use connect function that will give you store itself or you can also subscribe to particular part of the store and you will know then that part is been updated.

Yes, Store is read-only in some way, you can update the store but all changes are centralized and happen one by one in a strict order. Reducers are just pure functions that take previous state and action then return next state. Something like this:

function sampleReducer(state = 'SHOW_ALL', action) {
  switch (action.type) {
    case 'SET_VISIBILITY_FILTER':
      return action.filter
  default:
    return state
 }
}

Do you need this in your app or simply react will work ?

This question has a very simple explanation if you have played with so many states like every UI have its own some states and they are in some way conditionally dependent on each other then this is better to go with redux as it would make things easy to maintain in long run. But if your frontend does most of the things in the backend and there are no such big states that you have to manage in frontend then it is better to stay away from redux. React state management will work just fine for you without any problems.

So, Redux is nice but there are things what we should consider before using it.

Author

Related posts
Developers & Open SourceLatestNewsTechnology

Microsoft Grabs GPT-3 OpenAI Licence

Developers & Open SourceTechnology

Everything You Should Know About Full Stack Development

Developers & Open SourceGlobalSpecificationsTechnology

Machine Learning Libraries Which Every ML Enthusiast Must Know Of

Developers & Open Source

Introduction to JavaScript