CODEWITHSUNDEEP
reactjsredux
devcodes
devcodes

Reputation: 1088

Which react lifecycle method to use

I have a scenario where I have a landing page, Page-X, on which a component x1 gets data from fetch API call , which I have handled in componentDidMount() method , and until the data is fetched, show a loading gif.

Now when I click a component y1 on Page-X, a modal opens , and on-close modal, the loading gif comes back for component x1 , and looks like the redux store is cleared from where I was getting the fetched data for x1 (allallBatchesFromDB - see below)? So do i need to make api call again when I return back from the modal ? If yes , which life-cycle method should I use ? TIA

 componentDidMount = () => {

     store.dispatch( getDataDBNew(this.props.bugDetails.agentName, this.props.bugDetails.bugId, true,
                true, true, false, 'PFM'));
     console.log("callsed for "+this.props.bugDetails.bugId);
 }

render part : -

let allallBatchesFromDB = store.getState().batchFromDBReducer.batches;

     (allallBatchesFromDB) ?

         <div>
        <Componentx1 /> 
          </div>
            : 

            <img width={40} height={40} src={loadinglinear}/>

                }

fetch :

export function getDataDBNew(agentName,bugId,isRegressionChecked,
  isSegmentWiseChecked,isFeatureWiseChecked,
  isDirectCallRequired,featureName){
  return (dispatch)=>{
    axios.post('apiurl', {
      "agentName": agentName,
      "bugId": bugId,
      "isRegressionChecked": isRegressionChecked,
      "isSegmentWiseChecked": isSegmentWiseChecked,
      "isFeatureWiseChecked": isFeatureWiseChecked,
      "isDirectCallRequired": isDirectCallRequired,
      "featureName": featureName,
      "isDBCall" : true  })
  .then(function (response) {
    console.log("got batch new reponse from db"+ JSON.stringify(response));
    return dispatch(fetchBatchFromDBNew(bugId,response));
  })
  .catch(function (error) {
    console.log("getting errrorooror"+error);
  });

}
}

export function fetchBatchFromDBNew(bugId,response){
  return {
    type : ACTIONS_TYPES.FETCH_ALL_BATCH_FROM_DB_ALL_BUGS,
    batches : response.data,
    bugId : bugId
  };
}

reducer :

import {ACTIONS_TYPES} from '../Actions/action';

function batchFromDBReducer(state={batches:{},allBatchesFromDB:{},regressionBatchFromDB:{},segmentBatchFromDB:{},featureBatchFromDB:{}},action){

    var bool =false ;
    if(action.allBatchesFromDB){
        bool = true ;
    }
      switch(action.type){

        case ACTIONS_TYPES.FETCH_ALL_BATCH_FROM_DB_ALL_BUGS:
              return {
                batches: {
                    ...state.batches,
                    [action.bugId]: action.batches
                  }
              }


        default:
        return {
            defaultBatchFromDB : state.regressionBatchFromDB
        }

    }

}

export default batchFromDBReducer;

Latest Edit Also i have following line of code in my constructor :

        store.subscribe(() => this.forceUpdate());

Upvotes: 0

Views: 66

Answers (1)

Easwar
Easwar

Reputation: 5412

Apart from FETCH_ALL_BATCH_FROM_DB_ALL_BUGS is there any other redux action that is dispatched during this time ? If so that will clear previously fetched data as the default handler in batchFromDBReducer reducer does not extend over the previous state. Update the default handle with the following and see if it solves the issue :

return {...state, defaultBatchFromDB : state.regressionBatchFromDB}

If the reducer is intended to function that way, then upon modal close, inspect what is causing the re-render in pageX. If it is a prop change, you can fire the fetch in componentWillReceiveProps. If it's a state change do the same in componentDidUpdate

Upvotes: 1

Related Questions