web-dev-qa-db-fra.com

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

J'ai une application de formulaire en plusieurs étapes et j'ai du mal à comprendre comment je peux enregistrer mon état redux et le rejouer après une actualisation par exemple? Revenir en arrière/avancer dans l'application fonctionne comme prévu, mais après une actualisation du navigateur, mon état précédent est vide. Idéalement, j'aimerais pouvoir sauvegarder l'état antérieur dans le stockage de session relatif à un chemin, afin que je puisse rejouer plus tard, mais je ne vois pas comment je peux le faire facilement. Quelqu'un at-il fait quelque chose comme ça et peut-il fournir des conseils? Merci.

reactjsreact-routerredux
20
Lee

Il semble que vous essayez d'utiliser un framework d'application à page unique dans un contexte de plusieurs pages. Pour rendre les deux plus agréables, vous pouvez envisager de créer votre propre middleware qui synchronise l'état vers et depuis localStorage pour créer une application qui semble n'avoir perdu aucun état après une navigation d'actualisation/page.

  1. Semblable à la façon dont redux-logger enregistre à la fois les états précédent et suivant , je commencerais probablement par brancher un middleware au début (localStorageLoad ) et la fin (localStorageDump) de la création de la fonction createStoreWithMiddleware (juste avant redux-logger):
// store/configureStore.js

const createStoreWithMiddleware = applyMiddleware(
    localStorageLoad, thunk, promise, localStorageDump, logger
)(createStore);
  1. Déclenchez ensuite une action initiale dès que vous initialisez votre application pour charger l'état stocké avant le rendu de votre application:
// index.js

const store = configureStore();

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

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

localStorageLoad gérerait l'action INIT et enverrait une sorte de SET_STATE action, qui contiendrait une charge utile avec l'état précédemment enregistré dans 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);
}

Ensuite, ajoutez un réducteur qui remplace l'état par cette charge utile, en redémarrant efficacement l'application comme elle l'était auparavant.

  1. Pour terminer la boucle, vous auriez besoin d'un middleware localStorageDump qui se trouve à la fin de la chaîne qui enregistre chaque objet à état réduit dans localStorage. Quelque chose comme ça:
// 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, je ne l'ai pas encore essayée. J'espère que cela vous aidera à démarrer vers une solution.

36
bosgood

Vous ne pouvez pas stocker l'état lors de l'actualisation, c'est normal. En règle générale, vous les stockez dans des cookies ou un stockage Web.

  • Les cookies sont synchronisés entre le navigateur et le serveur et sont définis à chaque demande que vous effectuez.
  • Localstorage vous donne jusqu'à 5 Mo pour stocker des données et n'est jamais envoyé avec la demande.

Redux:

  1. Définissez les propriétés de stockage local lors du remplissage du formulaire. (assurez-vous de le nettoyer une fois terminé)
  2. Actualisez la page avec un formulaire incomplet.
  3. Lorsque react monte votre composant Form, utilisez la méthode componentWillMount pour lire les données localstorage et dispatch dans un réducteur
  4. Le réducteur met à jour l'état redux qui, à son tour, met à jour le composant avec les propriétés que vous avez obtenues de localstorage.

Si vous utilisez redux pour stocker des données de formulaire, distribuez les propriétés de localstorage.

Sinon, lisez le stockage local à l'intérieur du composant Form et définissez les valeurs initiales.

J'espère que cela t'aides !

3
JensDebergh