Reagire il routing e la persistenza a pagina di aggiornamento

voti
1

Sto usando reagiscono con reagiscono-router e reflusso come il mio archivio dati, ma sono sicuro su come affrontare al meglio con la persistenza per consentire refresh della pagina.

I miei componenti si collegano al negozio con Reflux.connect, ma dal momento che il negozio preleva i dati da un back-end, non è ancora disponibile quando i componenti prima inizializzare e render.

Quando l'utente inserisce la mia app fin dall'inizio, quindi tutti questi dati viene caricato in ordine e disponibili quando ha bisogno di essere, ma se più in basso un percorso si attiva un aggiornamento della pagina, reagire cerca di rendere i componenti che si basano su dati che non è c'è ancora.

Ho risolto questo mantenendo costantemente una copia di dati in LocalStorage e servire che dal negozio Reflux getInitialState (), in modo che tutti i componenti ottenere i dati prima che essi rendono.

Mi chiedo se questo è il modo corretto di farlo. Quando per qualche motivo i dati di archiviazione locale viene cancellato o danneggiato, l'interfaccia diventa nero, perché i componenti non possono accedere i dati corretti. Sottostrutture e proprietà non esistono e innescare errori javascript. Sembra una soluzione disordinato e inaffidabile.

Sono curioso di sapere quali modelli vengono utilizzati per risolvere questo problema.

------ modificare ----- Per rispondere al commento di WiredPrairie:

1) Perché inizializza i componenti con i dati in getInitialState?

Quando i miei componenti utilizzano Reflux.connect, non hanno i dati nel loro stato ancora il primo render come archivio ha ancora bisogno di recuperare i dati. Le mie opinioni attualmente non funzionano con garbo con i dati indefiniti. Restituendo la cache memorizzati localmente dal negozio Reflux in getInitialState (), tutti i componenti collegati avranno che i dati prima della loro prima chiamata rendering.

2) che cosa sta causando un aggiornamento della pagina e perché non possono essere caricati i dati nello stesso modo come lo era la prima volta?

E 'soprattutto una soluzione che ho dovuto costruire intorno livereload aggiornare la pagina quando faccio le modifiche (esaminerà utilizzando reagire-hotloader più tardi, ma non è un opzioni è ancora), ma gli utenti possono anche appena colpito di aggiornamento quando sono da qualche parte nel mio punto di vista nidificate e che avrebbe lo stesso effetto. Quando aggiornano manualmente, non stanno entrando l'applicazione alla partenza.

3) Quando i componenti sono collegati agli eventi di modifica di un negozio, perché non si aggiornano, allora?

Fanno aggiornamento, ma come ho detto che non si occupano di dati vuoti in questo momento e in prima rendono saranno perdere in attesa che il negozio per andare a prendere le cose. Posso fare tutti le mie opinioni lavorano con garbo con i dati vuoti, ma che vorrei aggiungere un sacco di codice boilerplate.

Dalle risposte finora, ho la sensazione che quello che sto facendo con localStorage è il modo comune per farlo. Cache roba localmente in localStorage o sessionStorage o qualcosa di simile, e servire i dati subito dopo un aggiornamento.

Dovrei fare le mie opinioni un po 'più robusto consegnando con grazia i dati vuoti in occasione strano che localStorage non funziona correttamente.

È pubblicato 13/02/2015 alle 11:08
fonte dall'utente
In altre lingue...                            


1 risposte

voti
0

Ho caching ogni Conservare in sessionStorage quando i suoi emitChange () incendi, e l'inizializzazione del negozio da sessionStorage la presenza di dati memorizzati nella cache, o valori nulli altrimenti. Questo sembra funzionare a condizione che i punti di vista in grado di gestire i valori null, che è probabilmente una buona idea in ogni caso (che suona come questo è il vostro problema principale).

Io suggerirei di fare le vostre opinioni gestire il caso di nessun dato con grazia, inizializzo tutto con valori nulli se la cache non è disponibile, e quindi chiamare il backend per aggiornare i valori nulli con un'azione ogni volta che il restituisce i dati.

Non ho provato il reflusso, ma in Flux regolare, sarebbe simile a questa (forse si può applicare lo stesso principio):

var _data;

if (sessionStorage.PostStore)
  _data = JSON.parse(sessionStorage.PostStore);
else {
  _data = {
    posts: null
  };
  BackendAPI.getPosts(function(err, posts) {
    if (posts) {
      PostActions.setPosts(posts);
    }
  });
}

...

AppDispatcher.register(function(payload) {
  var action = payload.action;

  switch (action.actionType) {

    ...

    case Constants.SET_POSTS:
      _data.posts= action.data.posts;
      break;

    default: 
      return true
  }

  // Update cache because state changed
  sessionStorage.PostStore = JSON.stringify(_data);

  PostStore.emitChange();
  return true;
});
Risposto il 13/02/2015 a 19:43
fonte dall'utente

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