时间戳

首页 > 解决方案 > 本地存储与 redux 状态

reactjs - 本地存储与 redux 状态

问题描述

我目前有一个使用 redux 的应用程序，我设置它每次加载应用程序时检查 JWT 令牌是否有效并将用户数据添加到状态。

我想知道调用api然后在每次重新加载时将数据存储在状态中或将数据存储一次之间有什么区别localStorage？

如何通过调用 api 和使用 redux 存储来设置代码。

检查令牌

const token = localStorage.UserIdToken;
if (token) {
  const decodedToken = jwtDecode(token);

  if (decodedToken.exp * 1000 < Date.now()) {
    store.dispatch(logoutUser());
  } else {
    store.dispatch({ type: SET_AUTHENTICATED });
    axios.defaults.headers.common['Authorization'] = token;
    store.dispatch(getUserData());
  }
}

getUserData()

export const getUserData = () => async dispatch => {
  try {
    const res = await axios.get('/user');
    dispatch({
      type: SET_USER,
      payload: res.data,
    });
  } 
  ...
};

标签： reactjsreduxlocal-storage

解决方案

首先，将数据存储一次localStorage意味着用户将不会收到对其数据的更新，但将始终收到相同的更新。想想每次登录时都看到相同的社交媒体提要，如果它被保存，localStorage而不是每次重新加载时都从 api 请求，就会出现这种情况。

其次，存储数据localStorage而不是 redux 状态意味着您可以使用使用 state 和 redux 的好处——redux 确保组件在依赖于状态更改时重新呈现。这可确保组件响应用户操作。localStorage不会那样做。

根据您的评论，我认为您应该考虑另一个原因：localStorage如果您想更改用户数据（例如添加一个字段），使用可能会带来问题。如果数据在 1 个位置，您可以更改所有用户数据并让用户在下次重新加载时提取新数据。如果数据在 中localStorage，您将需要向您的应用程序添加代码，该代码将在第一次重新加载时更改现有数据，然后在其他时间不执行任何操作。这不是一个好的模式，并且更有可能出现错误和问题。

推荐阅读