Persist Benutzeraktivität im Zustand nach dem erneuten Laden

Question

Ich habe eine Anwendung erstellt, wo Benutzer Informationen über Filme mit react und redux suchen können. Während der Suche kann der Benutzer einen Filter anwenden (zB Dauer). Ich möchte, dass dieser Filter aktiv ist, bis der Benutzer die Auswahl aufhebt, selbst nachdem der Benutzer die Seite neu geladen hat.

Problem: Current Szenario Benutzer anwenden Filteranwendung wird ein Ereignis auslösen und die Filterinformationen im Redux-Zustand speichern.

Aber sobald Benutzer aktualisieren die Seite Informationen über den Filter verloren gehen.

Lösung versucht: Ich habe eine Lösung mit Sitzungsspeicher und lokalen Speicher versucht, aber ich bin nicht mit der Lösung überzeugt.

Es wäre großartig, wenn jemand bessere Möglichkeiten zur Lösung dieses Problems zeigen könnte, falls verfügbar.

Answer 1

Für einige einfache Zustände, wie den aktuellen Wert des Filters, wäre es besser, den Standort zu verwenden.

Zum Beispiel haben Sie die folgende Seite: http://example.com/users.
Dann können Sie Filter wie folgt erhalten: http://example.com/users?group=admin.

Der Vorteil dieses Ansatzes ist einfach: Sie sagen explizit, den tatsächlichen Status der Seite zu verwenden, er kann das kopieren, Lesezeichen speichern oder an jemand anderen senden.

dieses Reagieren Code zu erreichen ist, können Sie folgendes tun (ich nehme an, dass Sie in Ihrem App React-Router):

class UsersPage extends React.Component { 

    // should be called somewhere in onClick 
    filterUserGroup(groupName) { 
    this.props.router.push({ 
     pathname: this.props.location.pathname, 
     query: { 
      group: groupName 
     } 
    }); 
    } 

    componentWillReceiveProps(nextProps) { 
    if(nextProps.location !== this.props.location) { 
     //filter was changed, you can apply new filter value 
     this.setState({ 
      selectedGroup: nextProps.location.query.group 
     }); 
    } 
    } 

}