Où dois-je récupérer les données initiales du serveur dans une application React Redux ?

Question

J'ai commencé à apprendre React / Redux et je suis tombé sur quelque chose qui est probablement une question très basique. Ci-dessous, des extraits de mon application avec du code supprimé pour des raisons de simplicité.

Mon état est décrit par un tableau de sites qui est vide par défaut. Plus tard, le reducer aura LOAD_SITES pour charger un ensemble différent de sites chaque fois que l'utilisateur passe à une page différente, mais pour l'instant, il ne fait rien. React commence par rendre PublishedSitesPage qui rend alors PublishedSitesBox qui boucle ensuite sur les données et rend les sites individuels.

Ce que je veux faire, c'est qu'il rende tout avec le tableau vide par défaut et que, pendant ce temps, il lance une promesse de "chargement de sites depuis le serveur" et, une fois qu'il est résolu, qu'il distribue LOAD_SITES action. Quelle est la meilleure façon d'effectuer cet appel ? Je pensais à un constructeur de PublishedSitesBox ou peut-être componentDidMount . Mais je ne suis pas sûr que cela fonctionne. Je crains de créer ainsi une boucle sans fin qui ne cessera de se renouveler. Je suppose que je pourrais empêcher cette boucle sans fin d'une certaine manière en ayant un autre paramètre d'état du type "haveRequestedInitialData". Une autre idée que j'ai eue est de simplement faire cette promesse juste après avoir fait ReactDOM.render() . Quelle est la meilleure et la plus propre façon de procéder ?

export default function sites(state = [], action) {
  switch (action.type) {
    default:
      return state;
  }
}
...

const publishedSitesPageReducer = combineReducers({
  sites
});

ReactDOM.render(
  <Provider store={createStore(publishedSitesPageReducer)}>
    <PublishedSitesPage />
  </Provider>,
  this.$view.find('.js-published-sites-result-target')[0]
);

...

export default function PublishedSitesPage() {
  return (
    <PublishedSitesBox/>
  );
}

...

function mapStateToProps(state) {
  return { sites: state.sites };
}

const PublishedSitesBox = connect(mapStateToProps)(({sites}) => {
  // render sites
});

Answer 1

Il n'y a aucune raison pour que cette logique de chargement de données touche vos composants React. Ce que vous voulez ici, c'est que le retour de la promesse envoie une action à vos réducteurs, qui apportent les modifications appropriées au magasin, ce qui entraîne ensuite le re-rendu des composants React comme il se doit.

(Peu importe que vous lanciez l'appel asynchrone avant ou après avoir appelé ReactDOM.render ; la promesse fonctionnera dans les deux cas).

Quelque chose comme ça :

var store = createStore(publishedSitesPageReducer);

someAsyncCall().then(function(response) {
  store.dispatch(someActionCreator(response));
});

ReactDOM.render(
  <Provider store={store}>
    <PublishedSitesPage />
  </Provider>,
  this.$view.find('.js-published-sites-result-target')[0]
);

Vos composants React sont des consommateurs de votre magasin, mais il n'y a aucune règle selon laquelle ils doivent être les SEULS consommateurs de votre magasin.

Answer 2

Vous trouverez ici un exemple clair de la manière de procéder : Tutoriel Facebook

Quant à la boucle sans fin, une fois que votre tableau n'est plus vide, effacez l'intervalle. Cela devrait empêcher la boucle.