刷新后 React-Redux 状态丢失 [英] React-Redux state lost after refresh

问题描述

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

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.

我对此很陌生，不知道应该包含哪些代码片段.我将离开 reducer 和 actions/index.js.另外 this 也很喜欢我的 git 存储库.

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 this is a lik for my git repository.

actions/index.js

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

reducer/auth_reducer.js

reducer/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.

推荐答案

不要重新发明轮子

do not reinvent the wheel

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

To store redux state even after page refresh you can use

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

易于实施且稳健.

这篇关于刷新后 React-Redux 状态丢失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！