本地存储与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,
    });
  } 
  ...
};
丹尼尔·格芬

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

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章