Why Should you use Redux with React?

When I first started out with react then I was confused about the state and props feature of react. I earlier thought that the state was to be inherited. That would mean if a component Navbar is called Inside the Component Home then the Navbar component should inherit the state of it’s parent container Home.

My logic was completely wrong, but you could achieve something like that in React with state and props. Let’s suppose that the component Home has a state as follows:

{
   ActiveLink:'Home'
}

You could pass that to the Navbar component with

//Give Navbar a prop
<Navbar ActiveLink={ActiveLink}/>
//Access the prop in Navbar which is React functional Component
function Navbar(props) {
  ActiveLink = props.ActiveLink
  return (<></>)
}

But here this technique can’t be applied on a large scale project.

The Problem

React does not care about other components while it renders a particular component, or in other words the components should have a unique state.

For example React thinks that a footer component need not know about the state of the header component as it is none of it’s bussiness, but in large scale websites you never know which component would require the same data the other component requires. It would not make sense sending in large data in a component of the website and making other components devoid of it. What I mean to say is.

You never which component of the website would require the data.

In this case data can be a call to an api or anything your frontend needs.

The Solutions

There are several solution to this problem like the one I mentioned in the starting.

The most appealing solution to this problem is storing your data in a large heap, and taking out data from it whenever you need. There are multiple libraries which do it. Like Redux, Mobx, hookstate and many others. The best among them is Redux because it is so straightforward.

Redux stores your data in some kind of a large sack in which you can’t directly put data. You need to define some reducers which will change the state.

//Redux Reducers
const initiaState = {
   ActiveLink:'Home'
}
const LinkReducers(state=initialState, action){
  switch(action.type) {
  case 'SETACTIVELINK':
    state.ActiveLink:'About'
    return state
  }
}

For example this reducer changes the state and now any component can use the useSelector hooks in React-Redux which gets the state.

Send in a Response to have a React + Redux course