Benefits of redux

Question

I've started learning React without Redux or Flux and have been hearing a lot about Redux and how it seems to be the favourable pattern to use for managing state going forward. My understanding of it is that the entire state of the App lives in the store which I believe is at the top of the React tree. The various child components then 'subscribe' to various states that are relevant to them.

This is somewhat confusing for me as I thought the core structure of React is already setup in this way? Ie if my component has a certain state then to pass it down to its child components in order to use if further down the React tree I would need to add in this.state.example or this.props.example to a component. To me with this approach i'm 'subscribing' the component in a way as well..

Apologies if this is not the right place for questions like this but if someone could tell me what i'm missing here or the added benefit of Redux that would be very helpful!

Answer 1

You are on the right track on the subscribing portion, but what makes Redux wonderful and many other Flux like state management patterns is that you don't have to pass properties down the child chain just so you could update a childs component like so (you could if you wanted to, but not needed):

function Parent() {
  return <ChildOne color="red" />
}

function ChildOne(props) {
  return <ChildTwo color={props.color} />
}

function ChildTwo(props) {
  return <h1>The Color was: {props.color}</h1>
}

It allows you to "dispatch" (a redux/flux term) an action to the state store to update a property on whichever object a component may be subscribed to.

A helpful library for that "connection" is react-redux. It has many capabilities, but the main that I see is connect which is a higher ordered component (HOC) that "wraps" your component with more logic including the part of the redux store that you want to subscribe to.

So the above could be:

export class Parent extends React.Component {
   componentDidMount() {
     this.props.dispatch(changeColor('red'));
   }
   render() {
     return <ChildOne />
   }
}
export default connect((state) => ({ //This property is the redux store
  parent: state.parent,
}))(Parent) //higher order component that wraps the component with redux functionality

function ChildOne(){
  return (
     <ChildTwo />
  );
}

export function ChildTwo(props) { //will have childTwo bound in props object
  return (
    <h1>The Color is: {props.childTwo.color}
  );
}
export default connect((state) => ({ //This property is the redux store
  childTwo: state.childTwo,
}))

Where the biggest difference is that you didn't have to pass the color from Parent down 2 levels to ChildTwo because it was "subscribed" to the childTwo object within the redux store and you connected that bit of state to the component so any change to the store will trigger the component to rerender from the state change.

The passing of properties and using Redux will make more sense with this medium post of Presentation and Container components, where passing of properties makes sense as you are only going down one child layer deep and the container component is handling logic such as ajax requests, or dispatches to parts of the redux store, etc.