CODEWITHSUNDEEP
reactjsreact-redux
user7494097
user7494097

Reputation:

How to get the updated props immediately after service call in reactjs?

In component I want to get the data immediately in props after calling webapi service call and do some operation,but issue is that it is not updating the props immediately because as we know that call will be async, So what will be the solution? My codes in component are like this:-

openPreviewClick=(event) => {
 this.props.GetReport();
 console.log(this.props.reportData);
}

function mapStateToProps (allReducers) {  
return {reportData: allReducers.reportData 
}}

const matchDispatchToProps = (dispatch) => ({
  GetReport: () => dispatch(LoadReportData())
})

export default connect(mapStateToProps, matchDispatchToProps)(MyContainer)

Now I have to open a pdf for this I have tried with two solution:-

  1. Handling life cycle of the page
componentWillReceiveProps(nextProps) {
 if(nextProps.reportPath!=undefined){
   window.open(nextProps.reportPath,"thePop","menubar=1,resizable=1,scrollbars=1,status=1,top=280,width=850,height=600");
}
  1. Writing the code in render
render () {
 if(this.props.reportPath!=undefined && this.props.reportPath!=""){}
      window.open(this.props.reportPath,"thePop","menubar=1,resizable=1,scrollbars=1,status=1,top=280,width=850,height=600");
}

openPreviewClick is my button click on which I want to access the props named as reportData.But console.log(this.props.reportData); is giving me the null value for the first time,second time if I will click then we are getting the data.How we can manage this? I already tried above two solution but it is not working.

Upvotes: 0

Views: 181

Answers (2)

Arun Redhu
Arun Redhu

Reputation: 1579

In your main file where you create the store you can dispatch action and set initial value just like 

import configureStore from './store/configureStore;
import {LoadReportData} from './actions/LoadReportData';

const store = configureStore();
store.dispatch(LoadReportData());

Upvotes: 0

Chris
Chris

Reputation: 58142

Simple answer, you don't ^1

If this is truely an async request, there is no guarantee when the data will come back, so your component needs to "understand" that is can exist in a "without data" state.

Simplest form of this is:

render() {
    if( ! this.props.reportData) return null;

    // normal render code, at this point we have data
    return <div>{this.props.reportData.map(foo, ...)}</div>
}

A better form, would be something like:

render() {
    if( ! this.props.reportData) {
        return <div><img src="loading.gif" /></div>;
    }

    // normal render code, at this point we have data
    return <div>{this.props.reportData.map(foo, ...)}</div>
}

^1 Note: You could technically use async functions, but I feel that would complicate the problem, especially without a fundamental understanding of what is already going on.

Upvotes: 2

Related Questions