Question about Redux-React

So, are we storing data or actions in the redux as a state form, when we use redux? And, this is why when we connect redux to components, we use mapStateToProps which means that getting redux states and turn that into props inside of the component?

The reason why we use StateToProps is that Props are much faster than the States and the app that uses redux in general will have a huge data flow that could affect the performance issues.

Am I getting it correctly?

You typically use Redux when you want to avoid passing props through several components before reaching the desired component. For example you need to pass props from component A to component E but in order to do that you need to pass props to component B, C , D in order to reach component E, even tho those 3 component don’t even need those props.

It is a good practice to have less components managing state and from them you pass data(managed in their state) to those components that don t manage the state. But when you have such case with long chain of passing props, Redux might be helpful, especially when you have some data in your state that you want to be globally available in your app.

So Redux allows you to have a central store and those components interested in slices of your global state can easily have access via props (mapStateToProps). Redux also offers you actions you can dispatch and it makes the flow of data easier to manage.

3 Likes

Thank yoou so much! I forgot to mention about the props chain. This was the primary reason that we use Redux in the first place as you’d mentioned.

I was asking this question because, I was very curious about the statement ‘mapStatesToProps’. I wondered if they centrally stored data as States and then convert them to Props.

Thank you so much for the answer!

Yes it passes data from your “central state” as props to those components that need the state. That way you don t have to manage the state in those components, they just get it passed as props.

So Redux is a predictable state container. It asks you to define some properties that represent the state of your application, and to read and update them in a very consistent, predictable way. State in this context means:

In information technology and computer science, a system is described as stateful if it is designed to remember preceding events or user interactions; the remembered information is called the state of the system.

Using Redux, the state is defined as a plain JS object. You can only update values in that object by sending (dispatching) actions. And you can only read values from the state by explicitly asking for them.

Redux doesn’t do anything except this. It deliberately makes sure that you can only deal with it in one very specific way. It isn’t there to make things more efficient, it’s there to make it simpler to deal with state, which is generally always the most complex part of an application to grok.

Say you have a component called “Person”, and in the Redux store you have a property person which is an object with a name and age. And in your Person component you have this:

function mapStateToProps (state) {
  return {
    name: state.person.name,
    age: state.person.name
  };
}

export default Connect(mapStateToProps)(Person);

What Connect is doing is creating a component that gets the bits of state from the store, then passes those bits to your actual component as props:

The connect component listens to the Redux store. When there is an update, it gets a copy of the properties it needs from the store. Then because Person takes those properties as props, the props update, and Person rerenders with new values.

Nope. mapStateToProps maps the state of the Redux store (whatever the values of the properties defined there are) to the props of a component. It can’t access the state of a component this way, because that’s internal to the component. What it does is inject props into the component. And when a component’s props change the component rerenders: this is just how React is designed to work, and the React bindings for Redux take advantage of that.

Again, nothing to do with efficiency, it just makes it much easier to understand and debug complicated applications.

1 Like

when you have such case with long chain of passing props, Redux might be helpful, especially when you have some data in your state that you want to be globally available in your app.