Reagieren-Redux Staat verloren nach aktualisieren

Ich bin wirklich neues zu Reagieren und Redux, ich habe nach Stephen Grider Advanced Reagieren und Redux-Kurs, und ich mache die client-Seite der Authentifizierung. Ich habe bereits ein token gespeichert auf meinem lokalen Speicher, und alles schien zu funktionieren bis ich aktualisiert die Seite. Wenn ich sign in/sign up die navigation wechselt zur Anzeige der log-out-button, aber dann, wenn ich manuell die Seite aktualisieren, die navigation wechselt zurück zur Anzeige der Zeichen in/sign up Tasten.

Ich bin wirklich neu hier und habe keine Ahnung, was sollte ich auch als code-snippets. Ich lasse den Druckminderer und die actions/index.js. Auch diese ist ein lik für meine git-repository.

actions/index.js

import axios from 'axios';
import { browserHistory } from 'react-router';
import { push } from 'react-router-redux';
import { AUTH_USER, UNAUTH_USER, AUTH_ERROR } from './types';

const API_URL = 'http://localhost:3000';

export function signinUser({ username, password }) {
  return function(dispatch) {
    //Submit username/password to the server
    axios
      .post(`${API_URL}/signin`, { username, password })
      .then(response => {
        //If request is good...
        //- Update state o indicate user is authenticated
        dispatch({ type: AUTH_USER });
        //- Save the JWT token to local storage
        localStorage.setItem('token', response.data.token);
        //- Redirect to the route '/feature'
        browserHistory.push('/feature');
      })
      .catch(() => {
        //If request is bad...
        //-Show an error to the user
        dispatch(authError('Bad login info'));
      });
  };
}

export function signupUser({ username, email, password }) {
  return function(dispatch) {
    axios
      .post(`${API_URL}/signup`, { username, email, password })
      .then(response => {
        dispatch({ type: AUTH_USER });
        localStorage.setItem('token', response.data.token);
        browserHistory.push('/feature');
      })
      .catch(response => {
        //TODO
        console.log(response);
        dispatch(authError('There was an error'));
      });
  };
}

export function authError(error) {
  return {
    type: AUTH_ERROR,
    payload: error
  };
}

export function signoutUser() {
  localStorage.removeItem('token');
  return { type: UNAUTH_USER };
}

reducer/auth_reducer.js

import { AUTH_USER, UNAUTH_USER, AUTH_ERROR } from '../actions/types';
export default function(state = {}, action) {
  switch (action.type) {
    case AUTH_USER:
      return { ...state, error: '', authenticated: true };
    case UNAUTH_USER:
      return { ...state, authenticated: false };
    case AUTH_ERROR:
      return { ...state, error: action.payload };
  }

  return state;
}

Vielen Dank im Voraus, wenn Sie brauchen keine zusätzliche code-snippet, lasst es mich bitte wissen.

Sind Sie versuchen zu tun localStorage.getItem('token') und Anmeldung der Benutzer, sobald die app mountet? Denn es wird nicht von selbst geschehen.
Um klar zu sein: alle state ist verloren, wenn Sie die Seite aktualisieren; alles, was Sie wollen, gespeichert werden manuell gesichert und wiederhergestellt werden.

InformationsquelleAutor OmarAguinaga | 2017-10-10

  1. 4

    Behalten Redux Staat, durch die Seite aktualisiert wurde, müssen Sie zum speichern des app-Zustands durch Speicherung in localStorage und rufen Sie es auf die Seite laden. Versuchen Sie zu Versand eine Aktion in der componentDidMount Ihrer App Komponente, das ruft die Daten aus der localStorage

    oder redux-persist

    InformationsquelleAutor Dane

  2. 1

    Müssen Sie fortbestehen des app-Zustands in "localStorage". Hier ist ein tutorial gemacht von Dan Abramov, der Schöpfer von redux.

    Ersteller Reagieren Sie bedeuten

    InformationsquelleAutor Piotr Pliszko

  3. 1

    In Ihrem reducer-Datei reducer/auth_reducer.js Sie können definieren den Anfangszustand des reducer. 

    const initialState = { 
user: localStorage.getItem('user'), foo:'bar',
};

export default function(state = initialState, action) {
    ...

    in Ihrem initialState laden Sie Sachen von localstorage oder aus einem cookie (cookie wird bevorzugt für auth-Zeug).

    initialState kann auch sein setup in der createStore. Es ist bis zu Ihnen. Wo müssen Sie den ursprünglichen Zustand. Ich verwende async für meine Strecken, so kann ich nicht verwenden createStore zu halten alle meine Anfangszustand seit einigen Strecken vielleicht nie geladen werden.

    const initialState = {
  user: localStorage.getItem('user'),
};

const store = createStore(mainReducer, initialState);

    Gibt es eine Bibliothek, die Sie verwenden können, genannt redux-bestehen. Dies wird Ihnen mehr Kontrolle, in welchem Zustand Sie behalten möchten. (https://github.com/rt2zz/redux-persist)

    InformationsquelleAutor Richard Torcato

Schreibe einen Kommentar