Ich habe ein Problem mit der Aktualisierung des Speichers, wenn ein Wechsel zwischen React und Router auftritt.

Aktualisieren Sie in meiner aktuellen Implementierung (unten) den Speicher, bevor Sie die nächste Seite rendern. Das Problem tritt auf, wenn die aktuelle Seite eine Geschäftsaktualisierung basierend auf den Daten für die nächste Seite erhält: (1) Die aktuelle Seite wird sinnlos gerendert (es werden Geschäftsaktualisierungen abonniert), da sich der aktualisierte Geschäftsinhalt auf die nächste Seite bezieht (2) Aktuelle Seitenumbrüche beim Rendern, da der aktualisierte Speicher nur Daten für die nächste Seite enthält.

superagent
  .get(opts.path)
  .set('Accept', 'application/json')
  .end((err, res) => {
    let pageData = res && res.body || {};
    store.dispatch(setPageStore(pageData));
    render(store);
  });

Das Gegenteil ist ebenfalls problematisch. Rendern Sie die nächste Seite, bevor Sie den Speicher aktualisieren. Das Problem besteht nun darin, dass die nächste Seite beim Rendern unterbrochen wird, da die für die nächste Seite erforderlichen Daten erst vorhanden sind, nachdem der Speicher aktualisiert wurde.

Entweder missbrauche ich die Bibliotheken, oder meine Architektur ist unvollständig oder etwas anderes. Hilfe

Der Rest des Beispielcodes:

app

const React = require('react');
const Router = require('react-router');
const {createStore} = require('redux');
const {update} = React.addons;
const routes = require('./routes'); // all the routes
let store = {};
let initialLoad = true;

Router.run(routes, Router.HistoryLocation, (Handler, opts) => {
  if(initialLoad) {
    initialLoad = false;

    // hydrate
    const initialState = JSON.parse(document.getElementById('initial-state').text);
    store = createStore(appReducer, initialState);
    render(store);

  } else {
    superagent
      .get(opts.path)
      .set('Accept', 'application/json')
      .end((err, res) => {
        let pageData = res && res.body || {};
        store.dispatch(setPageStore(pageData));
        render(store);
      });
  }
});

function render(store) {
  React.render(
    <Provider store={store} children={() => <Handler/>} />, 
    document.getElementById('react')
  );
}

action & reducer

function appReducer(state = {}, action) {
  switch(action.type) {
    case 'SET_PAGE_STORE':
      return update(state, {$merge: action.pageData});

    default:
      return reduce(state, action);
  }
}

const reduce = combineReducers({
  // ..all the reducers
});

function setPageStore(pageData) {
  return {type: 'SET_PAGE_STORE', pageData};
}