web-dev-qa-db-fra.com

Etat React-Redux perdu après l'actualisation

Je suis vraiment nouveau dans React et Redux, je suis le cours Advanced React et Redux de Stephen Grider et je fais du côté client de l’authentification. J'ai déjà un jeton enregistré sur mon stockage local et tout semblait bien fonctionner jusqu'à ce que je rafraîchit la page. Lorsque je me connecte/signe, la navigation change pour afficher le bouton de déconnexion, mais si j'actualise manuellement la page, la navigation revient pour afficher les boutons de connexion/inscription. 

Je suis vraiment nouveau dans ce domaine et je ne sais pas ce que je devrais inclure dans les extraits de code. Je vais laisser le réducteur et les actions/index.js. Aussi this est un lik pour mon référentiel git. 

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 };
}

réducteur/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;
}

Merci d'avance, si vous avez besoin d'un extrait de code supplémentaire, faites le moi savoir.

javascriptreactjsredux
6
OmarAguinaga

Pour conserver l'état Redux lors des actualisations de page, vous devez conserver l'état de l'application en le stockant dans localStorage et le récupérer au chargement de la page. Essayez d’envoyer une action dans la componentDidMount de votre composant App, qui récupère les données de la localStorage

4
Dane

Dans votre fichier réducteur réducteur/auth_reducer.js, vous pouvez définir l'état initial du réducteur. 

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

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

dans votre état initial, vous pouvez charger des éléments à partir de la mémoire locale ou d'un cookie (le cookie est préférable pour les éléments d'authentification). 

initialState peut également être configuré dans votre createStore. C'est à vous. Où vous avez besoin de l'état initial. J'utilise async pour mes routes, je ne peux donc pas utiliser createStore pour conserver tout mon état initial, car certaines routes peuvent ne jamais être chargées.

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

const store = createStore(mainReducer, initialState);

Vous pouvez utiliser une bibliothèque appelée Redux-persist. Cela vous donnera plus de contrôle sur l'état que vous souhaitez conserver. ( https://github.com/rt2zz/redux-persist )

1
Richard Torcato

Vous devez conserver l'état de l'application dans localStorage. Here est un tutoriel réalisé par Dan Abramov, créateur de Redux.

1
Piotr Pliszko