Question

我目前有一个使用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,
    });
  } 
  ...
};

Answer 1

首先，将数据存储在localStorage中一次意味着用户将不会收到对其数据的更新，但始终会收到更新。想像一下每次登录时都会看到相同的社交媒体供稿，如果将其保存在localStorage中，并且每次重新加载时都没有从api请求，情况就是这样。

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

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

本地存储与Redux状态

1 个答案: