Javascript 刷新后 React-Redux 状态丢失

React-Redux state lost after refresh

提问by OmarAguinaga

I'm really new to React and Redux, I've been following Stephen Grider's Advanced React and Redux course and I'm doing the client side of the authentication. I already have a token saved on my local storage and everything seemed to work fine until I refreshed the page. When I sign in/sign up the navigation changes to display the log out button but then if I manually refresh the page the navigation changes back to display the sign in/sign up buttons.

我真的是 React 和 Redux 的新手，我一直在关注 Stephen Grider 的 Advanced React 和 Redux 课程，我正在做客户端的身份验证。我已经在我的本地存储中保存了一个令牌，在我刷新页面之前，一切似乎都运行良好。当我登录/注册时，导航会更改为显示注销按钮，但是如果我手动刷新页面，导航会变回显示登录/注册按钮。

I'm really new to this and have no idea what should I include as code snippets. I'll leave the reducer and the actions/index.js. Also thisis a lik for my git repository.

我对此很陌生，不知道应该包含什么作为代码片段。我将离开 reducer 和 actions/index.js。另外这是我的git仓库一个LIK。

actions/index.js

动作/ 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

减速器/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;
}

Thanks in advance, if you need any extra code snippet just please let me know.

提前致谢，如果您需要任何额外的代码片段，请告诉我。

回答by Dane

To retain Redux state through page refreshes, you need to persist the app state by storing it in localStorageand retrieve it on page load. Try to dispatch an action in the componentDidMountof your Appcomponent, which retrieves the data from the localStorage

要通过页面刷新保留 Redux 状态，您需要通过存储应用程序状态localStorage并在页面加载时检索它来持久化应用程序状态。尝试在componentDidMount您的App组件中分派一个动作，该动作从localStorage

回答by Richard Torcato

In your reducer file reducer/auth_reducer.js you can define the initial state of the reducer.

在您的减速器文件 reducer/auth_reducer.js 中，您可以定义减速器的初始状态。

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

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

in your initialState you can load stuff from localstorage or from a cookie (cookie is preferred for auth stuff).

在您的 initialState 中，您可以从 localstorage 或 cookie 加载内容（cookie 是身份验证的首选）。

initialState can also be setup in your createStore. It's up to you. Where you need the initial state. I use async for my routes so I can't use createStore to hold all my initial state since some routes maybe never be loaded.

initialState 也可以在您的 createStore 中设置。由你决定。您需要初始状态的地方。我对我的路由使用 async，所以我不能使用 createStore 来保存我的所有初始状态，因为某些路由可能永远不会被加载。

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

const store = createStore(mainReducer, initialState);

There is a library you can use called redux-persist. This will give you more control of what state you want to keep. (https://github.com/rt2zz/redux-persist)

您可以使用一个名为 redux-persist 的库。这将使您更好地控制要保持的状态。( https://github.com/rt2zz/redux-persist)

回答by Ashad Nasim

do not reinvent the wheel

不要重新发明轮子

To store redux state even after page refresh you can use

即使在页面刷新后也要存储 redux 状态，您可以使用

https://www.npmjs.com/package/redux-persist

https://www.npmjs.com/package/redux-persist

It is easy to implement and robust.

它易于实施且稳健。

回答by Piotr Pliszko

You need to persist app state in localStorage. Hereis a tutorial made by Dan Abramov, creator of redux.

您需要在 localStorage 中保留应用程序状态。这是由 redux 的创建者 Dan Abramov 制作的教程。