Issue 165: why do we use React Redux

Why should we use React-Redux

Redux itself is a separate state library, and it can be used in any UI framework, such as React , Angular , Vue , Ember , and vanilla JS , although Redux is usually used with React, they are actually independent of each other.

if we are using Redux in any UI framework, we usually need a UI binding library to bind Redux to the UI framework we use, rather than manipulating the store state directly from our UI code.

React-Redux is actually the official Redux UI binding library. So, when we are in React and Redux, we also need to use React-Redux to bind the two libraries together.

While it is possible to write Redux store subscription logic by hand, doing so would become very repetitive. In addition, optimizing UI performance would require complicated logic.

although you can manually write the logic of Redux's status subscription, doing so is a repetitive task. In addition, optimizing the performance of UI requires complex logic.

The process of

subscription status, checking for data updates, and triggering re-render can become more generic and reusable. UI binding libraries such as React Redux can handle the logic of state interaction, so we don't need to write the relevant code ourselves.

Why is my component not re-rendered, or why is my mapStateToProps not running?

accidentally changing or modifying the state directly is the most common reason why components do not re-render after a scheduled operation.

Redux wants our reducers to be "immune" to update its status, which in effect means always copying our data and applying our changes to the copy.

if we return the same object from reducer, Redux will assume that nothing has changed, even if you have made changes to its contents.

Similarly, React Redux attempts to improve performance by shallow equivalent reference checking on incoming props in shouldComponentUpdate, and if all references are the same, shouldComponentUpdate returns false to skip the actual update of the original component.

The important thing to remember is that whenever a nested value is updated, a new copy of the value above it must be returned in the state tree.

for example, we have a & nbsp; state.a.b.c.d , we want to make an update to & nbsp; d , we also need to return a new copy of c , & nbsp; b , & nbsp; a and & nbsp; state .

this is why we usually use Object.assign () in reducers .

Why do my components re-render frequently?

React Redux makes some optimizations to ensure that our components re-render only when needed.

one of the points is a shallow equivalence check on the combined props objects generated by the mapStateToProps and mapDispatchToProps parameters passed to the connection. However, shallow equality does not help when a new array or object instance is created each time mapStateToProps is called. For example:

const mapStateToProps = state => {
  return {
    objects: state.objectIds.map(id => state.objects[id])
  }
}
undefined

although the array may contain exactly the same object reference each time, the array itself is a different reference, so the shallow equality check fails and React Redux will re-render the encapsulated component.

additional re-rendering can be solved by using reducer to save the array of objects to state, using Reselect to cache the mapped array, or manually implementing shouldComponentUpdate in the component and using functions such as _ .isEqual for more in-depth prop comparisons.

how to make mapStateToProps execute faster

while React Redux does minimize the number of calls to mapStateToProps functions, it is still a good way to ensure that mapStateToProps runs quickly and minimizes its workload. A common recommendation is to use Reselect to create a memorized "selector" function. These selectors can be grouped together, and the selector that is later in the pipe runs only when its input changes. This means that you can create selectors to perform operations such as filtering or sorting and ensure that real work can only be done when needed.

Reselect is a tool library. You can find out if you are interested.

Why is there no this.props.dispatch

in my component?

The

connect () function accepts two main parameters, both of which are optional. The first is mapStateToProps , which is a function we provide to extract data from the store when changes are stored and pass these values to the component as props. The second is mapDispatchToProps , which is a function we provide to take advantage of the dispatch function of store .

if you do not provide your own mapDispatchToProps function when calling connect (), React Redux will provide a default version that simply returns the dispatch function as prop . This means that if you do provide your own functionality, dispatch will not be provided automatically. If you still want it to be available as prop , you need to explicitly return it yourself in the mapDispatchToProps implementation.