it-swarm.com.ru

Состояние React-Redux потеряно после обновления

Я действительно новичок в React и ​​Redux, я слежу за продвинутым курсом Стивена Гридера React и ​​Redux и выполняю аутентификацию на стороне клиента. У меня уже есть токен, сохраненный в моем локальном хранилище, и все вроде нормально работало, пока я не обновил страницу Когда я вхожу/регистрируюсь, навигация изменяется, чтобы отобразить кнопку выхода из системы, но затем, если я вручную обновляю страницу, навигация возвращается обратно, чтобы отображать кнопки входа/регистрации.

Я действительно новичок в этом и понятия не имею, что я должен включить в качестве фрагментов кода. Я оставлю редуктор и action/index.js. Также это это лайк для моего git-репозитория.

действия/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 };
}

редуктор/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;
}

Спасибо заранее, если вам нужен дополнительный фрагмент кода, пожалуйста, дайте мне знать.

6
OmarAguinaga

Чтобы сохранить состояние Redux при обновлении страницы, необходимо сохранить состояние приложения, сохранив его в localStorage и получив его при загрузке страницы. Попробуйте отправить действие в componentDidMount вашего компонента App, который извлекает данные из localStorage

4
Dane

В своем файле редуктора reducer/auth_reducer.js вы можете определить начальное состояние редуктора. 

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

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

в вашем initialState вы можете загружать содержимое из локального хранилища или из файла cookie (файл cookie предпочтительнее для содержимого auth). 

initialState также можно настроить в вашем createStore. Тебе решать. Где вам нужно начальное состояние. Я использую async для своих маршрутов, поэтому я не могу использовать createStore для хранения всего моего начального состояния, так как некоторые маршруты, возможно, никогда не будут загружены.

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

const store = createStore(mainReducer, initialState);

Существует библиотека, которую вы можете использовать, называемая redux-persist. Это даст вам больше контроля над тем, какое состояние вы хотите сохранить. ( https://github.com/rt2zz/redux-persist )

1
Richard Torcato

Вам необходимо сохранить состояние приложения в localStorage. Здесь учебник, созданный Даном Абрамовым, создателем редукса.

1
Piotr Pliszko