Wie behalten Sie den Zustand Reagieren/Redux Anwendung auf Seite aktualisiert?

Ich bin neu reagieren js.

Habe ich zwei Routen, die wie Ein & B. leite ich Nun einige Werte von A nach B als Requisiten. Wenn B die Seite aktualisiert, dann werden alle Requisiten Werte von A ist verschwunden, und die B-Seite ist nicht Rendern. Ich bin mit reagieren mit redux.

mapDispatchToProps & mapStateToProps Funktionen werden verwendet, um die übergabe von Werten zwischen A & B-Routen als Requisiten.

Zum Beispiel: Route getan hat einige Berechnungen und speichern der Werte in redux Staat und Route B exportiert connect(mapStateToProps, mapDispatchToProps)(B) durch die Verwendung mapStateToProps in dem Ein Staat die Werte übergeben werden, B als Requisiten.

Bitte schlagen Sie mich am besten verarbeiten browser aktualisieren auf den oben genannten use-case-und auch wenn eine andere beste Weg, um übergeben Sie die Werte zwischen den Routen. Vielen Dank im Voraus.

  • Beibehalten von Werten in der Lage.Abfrage zum Beispiel.
  • Zeigen Sie uns, wie Sie die übergabe der Werte von A nach B
  • Bei der Aktualisierung Ihrer redux Staat ist verloren. Sie müssen speichern Sie die gewünschten Werte in sessionStorage und wiederherstellen, während storeCreation.
  • Danke. Dies ist genau das, was ich bin, es zu tun. Alles ist in Ordnung. Aber so wie ich sieht schlecht aus für mich. Deshalb erhob ich hier nach Hilfe. Derzeit bin ich überprüfen, ob ich die Werte in Requisiten und wenn die Werte nicht da sind in die props, dann bekomme ich die Werte aus sessionStorage. Ist das richtig? Weil wenn es gibt viele Orte, Requisiten verwendet werden, dann muss ich dies tun, schauen in alle Orte. Es wäre hilfreich, wenn Sie teilen Sie ein beliebiges Beispiel.
  • Sie müssen überprüfen Sie die sessionStorage während storeCreation und nicht jedes mal laden Sie die Komponente. Beim abrufen der benötigten Werte aus sessionstorage und speichern in den Shop, dann bei der Komponente erstellen, die Werte, die übergeben werden würde, als Requisiten, wenn es einen gibt.
  • Vielen Dank für Ihre Hilfe. Ich habe umgesetzt sessionStorage, wie Sie vorgeschlagen und es funktioniert einwandfrei.

InformationsquelleAutor AndroidKid | 2017-04-18



3 Replies
  1. 5

    Ihre Frage spricht von zwei verschiedenen Anliegen. Die erste ist die übergabe der Requisiten von einer Seite zur anderen Reagieren/Redux Anwendung, und der zweite für die Beibehaltung des Anwendungsstatus, wenn die Seite aktualisiert wird.

    Du beschrieben hast die richtige Methode der Weitergabe von Daten zwischen zwei Routen in einer redux-basierte Anwendung.

    Das bringt uns zum zweiten Anliegen.

    Wie behalten Sie den Zustand ein Reagieren/Redux Anwendung, wenn die Seite aktualisiert wird?

    Wenn ein Reagieren/Redux-Anwendung aktualisiert wird, wird es initialisiert wieder und die redux-store kommt, ist es default-Werte.

    Wenn Sie möchten, halten Sie die app-Zustands über Seite aktualisiert oder über mehrere Sitzungen, die Sie benötigen, speichern Sie den Zustand, und laden Sie es, wenn die app initialisiert.

    Können wir teilen das problem in drei Teile:

    • Wo die Daten gespeichert werden
    • Wie speichern redux Zustand
    • Wie die Daten neu laden, wenn die Anwendung initialisiert ist

    Schauen wir uns die einzelnen sub-problem individuell.

    , Wo die Daten gespeichert werden?

    Können Sie die Web-Storage-API zum speichern von Daten im browser des Nutzers. Diese API bietet 2 Mechanismen, um Daten zu speichern:

    • sessionStorage: Gespeicherte Daten bleiben erhalten, solange der browser geöffnet ist, einschließlich der-Seite wird neu geladen und wiederhergestellt.
    • „localStorage“: die Daten werden solange gespeichert, bis es gelöscht wird vom Benutzer oder der Anwendung. Es bleibt bestehen, auch wenn der browser geschlossen und wieder geöffnet werden.

    Beide sessionStorage und „localStorage“ die Sie zum speichern von Schlüssel-Wert-Paaren im browser, und beide bieten die gleichen Funktionen zum verwalten von Daten.

    Für sessionStorage (Beispiel entnommen aus MDN):

    //Save data to sessionStorage
    window.sessionStorage.setItem('key', 'value');
    
    //Get saved data from sessionStorage
    var data = window.sessionStorage.getItem('key');
    
    //Remove saved data from sessionStorage
    window.sessionStorage.removeItem('key');
    
    //Remove all saved data from sessionStorage
    window.sessionStorage.clear();

    Für „localStorage“:

    //Save data to localStorage
    window.localStorage.setItem('key', 'value');
    
    //Get saved data from localStorage
    var data = window.localStorage.getItem('key');
    
    //Remove saved data from localStorage
    window.localStorage.removeItem('key');

    Wie speichern redux Staat?

    Wie Sie bereits wissen, Redux bietet eine createStore – Funktion, die unsere root-reducer und gibt die Anwendung store.

    Den speichern – Objekt enthält die gesamte Anwendung zu speichern, und bietet ein paar Methoden wie man zu einen listener registrieren.

    store.subscribe(listener) können verwendet werden, um einen change-listener in den laden, die bekommen jedesmal aufgerufen, wenn der store aktualisiert wird.

    Fügen wir einen listener für das laden, das speichern, die den Zustand der Anwendung zu localStorage.

    Versuchen Sie, diese in der Datei, wo Sie erstellen Ihren Shop mit createStore:

    /**
     * This function accepts the app state, and saves it to localStorage
     * @param state
     */
    const saveState = (state) => {
        try {
            //Convert the state to a JSON string 
            const serialisedState = JSON.stringify(state);
    
            //Save the serialised state to localStorage against the key 'app_state'
            window.localStorage.setItem('app_state', serialisedState);
        } catch (err) {
            //Log errors here, or ignore
        }
    };
    
    /**
     * This is where you create the app store
     */
    const store = createStore(rootReducer);
    
    /**
     * Add a change listener to the store, and invoke our saveState function defined above.
     */
    store.subscribe(() => {
        saveState(store.getState());
    });

    , Wie zum zurückladen der gespeicherten Daten und das wiederherstellen des Anwendungsstatus, wenn die Anwendung initialisiert ist wieder?

    Wenn wir es schaffen, unsere app store mit createStore haben wir die Möglichkeit, an einem ersten Zustand in den speichern über den zweiten parameter der Funktion.

    Beim starten der Anwendung, überprüfen wir die localStorage für alle gespeicherten Daten. Wenn wir es gefunden haben, schicken wir es als zweiten parameter createStore.

    Diese Weise, wenn die app beendet die Initialisierung, es wird den gleichen Zustand, wie Sie es Tat, bevor die Seite aktualisiert wurde oder der browser geschlossen wurde.

    Versuchen Sie, diese in der Datei, wo Sie erstellen Ihren Shop mit createStore:

    /**
     * This function checks if the app state is saved in localStorage
     */
    const loadState = () => {
        try {
            //Load the data saved in localStorage, against the key 'app_state'
            const serialisedState = window.localStorage.getItem('app_state');
    
            //Passing undefined to createStore will result in our app getting the default state
            //If no data is saved, return undefined
            if (!serialisedState) return undefined;
    
            //De-serialise the saved state, and return it.
            return JSON.parse(serialisedState);
        } catch (err) {
            //Return undefined if localStorage is not available, 
            //or data could not be de-serialised, 
            //or there was some other error
            return undefined;
        }
    };
    
    /**
     * This is where you create the app store
     */
    const oldState = loadState();
    const store = createStore(rootReducer, oldState);

    Das ist es! Nun, kombinieren Sie die letzten zwei code-Blöcke, und Ihre Anwendung hat die Fähigkeit, um den Status beizubehalten, über Seite aktualisiert werden, oder auch über die browser-Neustart.

    Hoffe, das hilft.
    Prost!
    🙂

    • Große Zusammenbruch. Nützlich auch ohne Verwendung von redux (was Sie nicht sein sollte, wenn die Aufrechterhaltung der Zustand zwischen den Aktualisierungen/sessions ist alles, was Sie brauchen).
  2. 1

    können Sie versuchen redux-persist oder redux-storage ,
    beim initialisieren Speicher
    createStore(reducer, [preloadedState], [enhancer]),
    Sie erhalten die Daten ein und ordnen Sie preloadedState

  3. 0

    Versuchen Sie es mit react-router und hierdurch werden die Komponenten basierend auf route.

    Wenn die app initialized, sollte die app Daten abrufen und aktualisieren den Speicher mit den benötigten Informationen.

    ZB: In dem unten angeführten Beispiel, Wenn IntilizeApp Komponente ist die Montage berechnen Sie die erforderlichen Informationen ein, und aktualisieren Sie den Shop durch die Einplanung der Aktionen. Verwenden Sie reagieren Lebenszyklus-Methode wie componentWillMount zu berechnen.

        import {Router, Route, hashHistory} from 'react-router'
        //import initializeApp
        //import ComponentA
        //import ComponentB
    
        <Router history={hashHistory}>
          <Route path="/" component={InitializeApp}>
            <Route name="A" path="A" component={ComponentA} />
            <Route name="B" path="B" component={ComponentB} />
          </Route>
        </Router>
    • Danke @Sridhar Sg . Ich werde auch versuchen auf diese Weise, und sehen, ob es mir hilft oder nicht.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.