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.