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

Я действительно новичок в React и Redux, я слежу за курсом Стивена Гридера Advanced 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;
}

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

Ответы

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

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

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

const store = createStore(mainReducer, initialState);

export const saveState = state => {
  try {
    const serializedState = JSON.stringify(mergeDeep(loadState(), state));
    localStorage.setItem('state', serializedState);
  } catch (err) {
    // Ignore write errors.
  }
};