JS isomorfo - solo lato client httpRequest

Question

Domanda sulla popolazione di dati del negozio in applicazioni di flusso isomorfico. (Sto usando reagire, alt, iso e il nodo, ma la teoria vale per altri esempi)

Ho un flusso di 'negozio' (http://alt.js.org/docs/stores/), che ha la necessità di ottenere i dati da un API:

getState() { 
    return { 
     data : makeHttpRequest(url) 
    } 
} 

e mentre l'utente naviga attraverso la SPA, ulteriori dati verranno caricati tramite richieste http.

Desidero che questa app sia isomorfa, in modo da poter eseguire il rendering delle app complete in html, incluso il lato del server di dati più recente e restituirlo all'utente per il caricamento iniziale della pagina.

react.renderToString() mi permette di rendere l'app come html, e posso seminare i dati utilizzando alt & iso come:

storeData = { "MyStore" : {"key" : "value"}}; // set data for store 
alt.bootstrap(JSON.stringify(storeData || {})); // seed store with data 

var content = React.renderToString(React.createElement(myApp)); // render react app to html 

Il problema è che vedrò errori durante l'esecuzione lato server js come lo store vorrà fare una richiesta http che non sarà in grado di fare (come xmlhttprequest non esisterà nel nodo)

Qual è il modo migliore per risolvere questo problema?

L'unica soluzione che viene in mente è quello di avvolgere la HttpRequest dal negozio con:

var ExecutionEnvironment = require('react/lib/ExecutionEnvironment'); 

    ... 

    if (ExecutionEnvironment.canUseDOM) { 
     // make http request 
    } else { 
     // do nothing 
    } 

un'idea migliore? Grazie in anticipo.

Answer 1

Si consiglia di eseguire il hooking nella libreria Ajax o XMLHttpRequest direttamente se si esegue serveride. Basta con il codice che fornisce i dati direttamente dal database o dall'applicazione.

Un rapido esempio:

var noop= function(){} 

window.XMLHttpRequest= function(){ 
    console.log("xhr created", arguments); 
    return { 
     open: function(method, url){ 
      console.log("xhr open", method, url); 
      // asynchronously respond 
      setTimeout(function(){ 
       // pull this data from your database/application 
       this.responseText= JSON.stringify({ 
        foo: "bar" 
       }); 
       this.status= 200; 
       this.statusText= "Marvellous"; 
       if(this.onload){ 
        this.onload(); 
       } 
       // other libs may implement onreadystatechange 
      }.bind(this), 1) 
     }, 
     // receive data here 
     send: function(data){ 
      console.log("xhr send", data); 
     }, 
     close: noop, 
     abort: noop, 
     setRequestHeader: noop, 
     overrideMimeType: noop, 
     getAllResponseHeaders: noop, 
     getResponseHeader: noop, 
    }; 
} 

$.ajax({ 
    method: "GET", 
    url: "foo/bar", 
    dataType: "json", 
    success: function(data){ 
     console.log("ajax complete", data); 
    }, 
    error: function(){ 
     console.log("something failed", arguments); 
    } 
}); 

http://jsfiddle.net/qs8r8L4f/

ho sbattuto questo in su negli ultimi 5 minuti per lo più utilizzando il XMLHTTPRequest mdn page

Tuttavia, se si utilizza tutto quanto non direttamente sulla base di XMLHttpRequest o esplicitamente consapevole del nodo (come superagente) probabilmente dovrai shimare la funzione stessa della libreria.

Altri lavori da fare su questo frammento di codice sarebbero l'implementazione di errori e diversi tipi di contenuto.