Record the problem of asynchronous request data render not executed in Redux

Time:2020-10-31

First of all, let’s describe the problem. I feel that this learning method is good.

About the problem of state change in Redux and render does not render.

The actual problem scenarios are as follows:

Data: an array datelist, an object activeobj.
[“2013″,”2014”],{}

In accordion component, we generate corresponding list according to array traversal, and add onchange monitoring for it.

The ideal effect is to send an Ajax request according to the list you click, display loading before the request is completed, and display the corresponding data after the completion of the Ajax request.
The actual effect is that no matter which one you click, loading is displayed.

errorThe code is:

//Ajax request post processing res
.then(res=>{
let result;
if(!this.props.activeObj){
  //Handling default situations
  result={
    [date]:res.data.shiftList
  };
}else{
   //Key part of the problem
  result = this.props.activeObj;
  result[date] = res.data.shiftList;
}
this.props.setActiveObj({
  payload: result
});

The main reasons for the error are as follows:

The main reason for the error is that we don’t have a good understanding of what state is in redux.
We’re going through this.props.setActiveObj (an encapsulated dispatch) modifies the activeobj object.
The change of state tree in Redux is affected by our operation.result = this.props.activeObjIt’s just a reference assignment, and our modificationresult[date] = res.data.shiftListIt is also modified on the original activeobj object. As a result, Redux did not find any changes in the state tree, so it did not trigger the render to refresh our view.

summary

If you are familiar with the basic concepts, you can climb the pit quickly enough. Don’t think about catching insects too complicated. What is wrong is often very simple.
PS: encapsulate some asynchronous request components yourself.

Recommended Today

What black technology does the real-time big data platform use behind the glory of the king?

Hello everyone, I’m Xu Zhenwen. Today’s topic is “Tencent game big data service application practice based on Flink + servicemesh”, which is mainly divided into the following four parts: Introduction to background and Solution Framework Real time big data computing onedata Data interface service onefun Microservice & servicemesh 1、 Introduction to the solution framework and […]