L'aggiunta di resolver a reagire-router

voti
0

In reagire-router, c'è qualche modo per passare una proprietà dal Route-definizione che può essere recuperata all'interno della funzione Router.run? Voglio azioni specifiche al fuoco per i percorsi specifici. Qualcosa di simile, forse:

<Route handler={someComponent} resolve={someAction} />

In Router.Run voglio eseguire tale data azione definita nella determinazione. C'è un modo di fare che?

Il motivo per fare questo è quello di assicurarsi che ogni percorso può istanziare service-chiamate (da un'azione definita) per assicurarsi che i negozi hanno i dati necessari per questa strada. Facendo nel componente è anche una possibilità, il problema che abbiamo ora è che diversi componenti all'interno dello stesso percorso deve gli stessi dati, rendendo richiedono dati al API diverse volte, e anche innescando rerendering per ogni risultato ritornassi in dalle quelle chiamate .

È pubblicato 10/06/2015 alle 12:10
fonte dall'utente
In altre lingue...                            


1 risposte

voti
0

Si può fare qualcosa di simile in React router con l'aggiunta di una static(usando createClass) o una proprietà sulla classe componente (quando si utilizza le classi ES6) e poi li esegue con Reagire Router.

var Component1 = React.createClass({
  statics: fetchData: function(params) {
    return API.getData(params);
  },

  // ...
});

class Component2 extends React.Component {
  // ...
}

Component2.fetchData = (params) => API.getData(params);

Poi, quando si esegue il router, cercare tutte le rotte corrispondenti che hanno un fetchDatametodo statico e chiamarlo. Si suppone che qui fetchData(e quindi API.getData) restituisce una promessa:

Router.run(routes, function(Root, state) {
  var data = {};

  var routesWithFetchData = state.routes.filter(function (route) {
    return route.handler.fetchData
  });

  var allFetchDataPromises = routesWithFetchData.map(function (route) {
    return route.handler.fetchData(state.params).then(function (routeData) {
      data[route.name] = routeData;
    });
  });

 Promise.all(allFetchDataPromises).then(function() {
    React.render(<Root data={data} />, container);
  });
});

(Vedere questo React esempio router per maggiori dettagli.)

È possibile risolvere i "molteplici componenti recuperano gli stessi dati" problema assicurando che il APImodulo catturare le richieste per gli stessi dati e assegnare loro la stessa promessa. pseudocodice:

API = {
  getData: function(params) {
    if (requests[params]) {
      return requests[params];
    } else {
      request[params] = new Promise(function(resolve, reject) {
        // fetch data here
      });
    }
  }
};
Risposto il 10/06/2015 a 15:40
fonte dall'utente

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more