Waar haal ik de initiële gegevens van de server op in een React Redux-app?

Ik ben begonnen met het leren van React / Redux en stuitte op iets dat waarschijnlijk een heel basale vraag is. Hieronder staan ​​fragmenten uit mijn app waarvan enkele code is verwijderd omwille van de eenvoud.

Mijn status wordt beschreven door een reeks sites die standaard leeg is. Later zal reducer LOAD_SITESactie hebben om een ​​andere set sites te laden wanneer de gebruiker naar een andere pagina pagineert, maar voorlopig doet het niets. React begint met het renderen van PublishedSitesPagedie vervolgens PublishedSitesBoxrendert, die vervolgens gegevens doorgeeft en individuele sites weergeeft.

Wat ik wil doen is alles laten renderen met de standaard lege array en ondertussen een “sites laden van server”-belofte initiëren en zodra het is opgelost, de actie LOAD_SITESverzenden. Wat is de beste manier om dit te bellen? Ik dacht aan een van beide constructeurs van PublishedSitesBoxof misschien componentDidMount. Maar ik weet niet zeker of dit zou werken – mijn zorg is dat ik op deze manier een eindeloze lus maak die steeds opnieuw wordt weergegeven. Ik denk dat ik deze eindeloze lus op de een of andere manier zou kunnen voorkomen door een andere statusparameter te gebruiken in de trant van “haveRequestedInitialData”. Een ander idee dat ik had, is om deze belofte te doen direct nadat ik ReactDOM.render()heb gedaan. Wat is de beste en schoonste manier om dit te doen?

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
});

Antwoord 1, autoriteit 100%

Er is geen enkele reden waarom deze logica voor het laden van gegevens uw React-componenten raakt. Wat je hier wilt, is de terugkeer van de belofte om een ​​actie naar je reducers te sturen, die de juiste wijzigingen in de winkel aanbrengen, waardoor de React-componenten opnieuw worden weergegeven zoals van toepassing.

(Het maakt niet uit of je de asynchrone oproep start voor of nadat je ReactDOM.render hebt aangeroepen; de belofte zal hoe dan ook werken)

Zoiets:

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]
);

Uw React-componenten zijn consumenten van uw winkel, maar er is geen regel dat ze de ENIGE consumenten van uw winkel moeten zijn.

Antwoord 2

Er is hier een duidelijk voorbeeld van hoe je het moet doen: Facebook-zelfstudie

Wat betreft de eindeloze lus: als uw array niet langer leeg is, moet u het interval wissen.
Dit zou de lus moeten voorkomen.