ReactJS Flux multiple requests to restAPI on render

Question

I just started to explore ReactJS with Flux. I've been managing to initialize the API service to get initial Data but on the flow I have some problems when I render the component.

The initial json contains a thumbnail_id and over this ID I should ping another endpoint to get thumbnail infos.

How would I proceed to call another restAPI endpoint on component render?

so my code looks as it follows

import React from 'react';
import EstateStore from '../stores/EstateStore';
import EstateActions from '../actions/EstateActions';

export default class Estates extends React.Component{

 constructor(){
    super();
    this.state = {
        estates: []
    }

    this._onChange = this._onChange.bind(this);
    this.handleChange = this.handleChange.bind(this);

  }

  componentWillMount(){
    console.log('estatesComponent will mount');
     EstateStore .addChangeListener(this._onChange);
  }

  componentWillUnmount() {
    EstateStore.removeChangeListener(this._onChange);
  }

  componentDidMount () {
    console.log('estatesComponent mounted');
    EstateActions.getEstates();
  }

  handleChange(e) {

  }

  _onChange() {
    this.setState({
      estates: EstateStore.getEstates()
    });
  }

  render() {
   var estates;
   if (this.state.estates) {

      estates = this.state.estates.map(function (estate) {

        return (
      <li className="item">
        <div className="row">
        <div className="immos-container">
          <div className="col-lg-3 col-md-3">
           // here I should call another endpoint on estate.thumbnail_id
            <img className="img-responsive" src={estate.thumbnail_id} />
          </div>
          <div className="col-lg-9 col-md-9">
            <h3> dangerouslySetInnerHTML={{__html: estate.title}} </h3>
            <span className="address">dangerouslySetInnerHTML={{__html:estate.address}} <i className="fa fa-pin"></i></span>
              <div className="col-xs-7" dangerouslySetInnerHTML={{__html: estate.content}} />
              <div className="col-xs-5">
            <ul className="immo-detail">
              <li><span>Etage:</span> {estate.etage}</li>
              <li><span>Einheiten:</span> {estate.etage}</li>
              <li><span>Fläche:</span>{estate.area}</li>
              <li><span>Kaufpreis:</span>{estate.price}</li>
            </ul>
            </div>
          </div>
        </div>  
        </div>
      </li>)

      });
    }

    return (    
        <div>
            <div className="container-fluid">
                <div className="immo-list">
                <ul className="immos">
                    {estates}
                </ul>
                </div>
            </div>
        </div>
    );
  }
}

//export default Estates;

If it is a simple getA then getB just chain the actions. Look at http://stackoverflow.com/questions/32537568/flux-waitfor-specific-event/32542242#32542242. — J. Mark Stevens, Sep 20 '15 at 16:04

score 0 · Answer 1 · answered Sep 22 '15 at 01:30

It depends on what flux framework you choose. You may need to use setTimeout to trigger another action in some framework such as fluxxor (you'll get your thumbnail_id in componentWillReceiveProps or componentDidUpdate).Some people also pass callback into the actions. There's also a discussion about how to chain actions in redux, and maybe you can get some ideas from it.

https://github.com/rackt/redux/issues/468

ReactJS Flux multiple requests to restAPI on render

1 Answers1