Routeur Redux - comment rejouer l'état après rafraîchissement?

on dirait que vous essayez d'utiliser un cadre d'application d'une seule page dans un contexte de plusieurs pages. Pour rendre les deux jouer plus agréable ensemble, vous pourriez envisager de faire votre propre middleware qui synchronise l'État à et de localStorage pour créer une application qui semble n'avoir perdu aucun état après un rafraîchissement/navigation de page.

1. de la même manière que redux-enregistreur journaux les États précédent et suivant, je commencerais probablement par me brancher un middleware au début (localStorageLoad) et de fin (localStorageDump de l'createStoreWithMiddleware création de fonction (juste avant redux-logger):

// store/configureStore.js

const createStoreWithMiddleware = applyMiddleware(
    localStorageLoad, thunk, promise, localStorageDump, logger
)(createStore);

2. puis lancez une action initiale dès que vous initialisez votre application pour charger l'état stocké avant que votre application ne rende:

// index.js

const store = configureStore();

store.dispatch({ type: 'INIT' });

ReactDOM.render(<App />, document.getElementById('root'));

localStorageLoad poignée INIT action et d'expédition une sorte de SET_STATE action, qui contiendrait une charge utile avec l'état précédemment enregistré localStorage.

// middleware/localStorageLoad.js

export default store => next => action => {
    const { type } = action;
    if (type === 'INIT') {
        try {
            const storedState = JSON.parse(
                localStorage.getItem('YOUR_APP_NAME')
            );
            if (storedState) {
                store.dispatch({
                    type: 'RESET_STATE',
                    payload: storedState
                });
            }
            return;
        } catch (e) {
            // Unable to load or parse stored state, proceed as usual
        }
    }

    next(action);
}

puis, Ajouter un réducteur qui remplace l'état par cette charge utile, redémarrant effectivement l'application comme elle l'était auparavant.

3. Pour compléter la boucle, vous auriez besoin d'un localStorageDump middleware qui vient à la fin de la chaîne qui enregistre chaque état réduit objet dans localStorage. Quelque chose comme ceci:

// middleware/localStorageDump.js

export default store => next => action => {
    const state = store.getState();
    localStorage.setItem('YOUR_APP_NAME', JSON.stringify(state));
    next(action);
}

Juste une idée, n'ai pas réellement essayé. L'espoir qui aide à obtenir vous avez commencé à trouver une solution.