javascript - 刷新后 React-Redux 状态丢失

Question

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

我对此很陌生，不知道应该将什么作为代码片段包含在内。我将保留 reducer 和 actions/index.js。还有 this喜欢我的 git 仓库。

Action /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

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

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

Answer 1

do not reinvent the wheel

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

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

它易于实现且健壮。