Question

我得到一个状态值，即登录用户名，然后在页面上打印登录用户名。但是，当我刷新页面时，状态值就会丢失。

我正在使用redux创建状态值。

这是我的action.js-

// Login - get user token
export const loginUser = userData => dispatch => {
  axios
    .post("http://localhost:5000/login", userData)
    .then(res => {
      // Save to localStorage
      // Set token to localStorage
      const { token } = res.data;
      localStorage.setItem("usertoken", token);
      // Set token to Auth header
      setAuthToken(token);
      // Decode token to get user data
      const decoded = jwt_decode(token);
      // Set current user
      dispatch(setCurrentUser(decoded));
    })
    .catch(err => {
      return err;
    }

    );
};
// Set logged in user
export const setCurrentUser = decoded => {
  return {
    type: SET_CURRENT_USER,
    payload: decoded
  };
};
// User loading
export const setUserLoading = () => {
  return {
    type: USER_LOADING
  };
};
// Log user out
export const logoutUser = () => dispatch => {
  // Remove token from local storage
  localStorage.removeItem("usertoken");
  // Remove auth header for future requests
  setAuthToken(false);
  // Set current user to empty object {} which will set isAuthenticated to false
  dispatch(setCurrentUser({}));
};

这是我的reducer.js-

import {
  SET_CURRENT_USER,
  USER_LOADING
} from "../Actions/actions";
const isEmpty = require("is-empty");
const initialState = {
  isAuthenticated: false,
  user: {},
  loading: false
};
export default function (state = initialState, action) {
  switch (action.type) {
    case SET_CURRENT_USER:
      return {
        ...state,
        isAuthenticated: !isEmpty(action.payload),
        user: action.payload
      };
    case USER_LOADING:
      return {
        ...state,
        loading: true
      };
    default:
      return state;
  }
}

在header.js中，我正在打印已登录的用户名。

const userLink = () => (
      <div className="" style={{ display: "inline-flex" }}>
        <li class="nav-item">
          <Link className="nav-link" to="/">
            {user.name}
          </Link>
        </li>
        <li class="nav-item">
          <a href="" onClick={this.logOut.bind(this)} className="nav-link">
            Logout
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/">
            AboutUs
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/">
            ContactUs
          </a>
        </li>
      </div>
    );

我正在登录状态下的用户名。但是当我刷新页面时，loginIn用户名的状态值会丢失。我还要在我的React Application的所有页面中包含Header.js文件。

如果刷新页面，如何保存登录用户的状态值而不会丢失？

Answer 1

React应用程序的两个常见存储是组件内部状态和redux。卸载该组件后，将无法访问定义为状态的参数。因此，当您从页面路由或刷新时，您会丢失状态。但是，如果您在redux存储区中设置了一个参数，则可以在整个应用程序中访问该参数。在这种情况下，如果刷新页面，则从一个页面路由到另一页面会丢失redux商店，您仍然可以访问商店。因此，如果您想在商店中使用参数：

首先将其设置在redux中，然后将其保存在浏览器的localStorage中。要保存和获取localStorage中的参数，您可以参考以下链接：https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

但是正确的方法是使用redux-persist库并将参数放入其white-list中。你可以在这里读更多关于它的内容： https://github.com/rt2zz/redux-persist

我希望这会有所帮助。如果是的话，请给我投票：）

Answer 2

当我刷新页面时，状态值会丢失

这是React和Redux状态的工作方式。它们仅在页面加载时存储在内存中。看起来您已经将令牌存储在本地存储中，这是更永久地存储数据的正确方法。问题是，页面加载时，您永远不会从本地存储取回值。您应该检查令牌是否在本地存储中。如果是这样，则只需获取它。如果没有，则重定向到登录屏幕。

Answer 3

刷新页面时，需要检查已存储在localStorage中的值，然后再次加载用户（SET_CURRENT_USER调度）。您可能已经在这样做了，但是认为值得一提，因为在您发布的代码中我还没有看到这一点。

Answer 4

您可能必须使用永久存储（例如localstorage），然后用它再次水化redux，将redux值设置为

  localstorage.setItem('user', JSON.stringify(state));

将其检索为

  const reduxState = localstorage.getItem('user');
  JSON.parse(reduxState)

Answer 5

Redux Persist必须适合您的情况。 Redux persist是一个允许将redux存储保存在浏览器本地存储中的库。

Redux Persist

刷新时状态值在react.js中丢失

5 个答案: