JavaScript — состояние React-Redux, потерянное после обновления

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

Я действительно новичок в React и Redux, я слежу за продвинутым курсом Стивена Гридера и 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 ={amp}gt; { // 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(() ={amp}gt; { // 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 ={amp}gt; { dispatch({ type: AUTH_USER }); localStorage.setItem('token', response.data.token); browserHistory.push('/feature'); }) .catch(response ={amp}gt; { // 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; } 

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

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector