首页 文章

重新加载页面时Redux存储更改

提问于
浏览 次
1

我正在使用react redux实现两种不同类型用户的登录 . 这是我的登录方法：

export const login = (credentials) => (dispatch) =>
    api.user.login(credentials).then(user => {
      localStorage.userJWT = user.token;
      localStorage.userEmail = user.email;
      localStorage.userId = user.id;
      localStorage.surname = user.surname;
      localStorage.type = user.type;
      dispatch(userLoggedIn(user));
});

  • 对于第一类用户，我从后端返回：token，email，id，surname .

  • 对于第二种类型的用户，我从后端返回：令牌，电子邮件，ID，类型 .

我做了一些第二类用户无法访问的安全路由 . 因此，如果返回变量 surname ，我将为该用户定义特定路由 .

如果返回 type 变量，它会正确显示链接和redux存储中的所有内容 . 但是，如果我重新加载页面，那么它会自动将变量 type 更改为 undefined surname .

这是我试图在存储中保存redux状态的地方，即使我重新加载页面 . const store = createStore（rootReducer，composeWithDevTools（applyMiddleware（thunk）））;

if(localStorage.userJWT && localStorage.userEmail && localStorage.userId && localStorage.type){
   const user = { token: localStorage.userJWT, email: localStorage.userEmail, id: localStorage.userId, type: localStorage.type};
   store.dispatch(userLoggedIn(user));
 }
 if(localStorage.userJWT && localStorage.userEmail && localStorage.userId && localStorage.surname){
   const user = { token: localStorage.userJWT, email: localStorage.userEmail, id: localStorage.userId, surname: localStorage.surname};
   store.dispatch(userLoggedIn(user));
 }

你能否说明为什么它不遵循我的if声明 . 先感谢您 .

reactjs redux store

1 回答

  • 2

    重新加载时重新初始化Redux存储/状态 . 您可以将身份验证信息保存在本地存储中，然后将其拉出以用作初始状态 . 这样，您的Redux状态将始终具有该身份验证信息，即使在重新加载时也是如此 .

    function reducer (state = initState(), action) {
    return state
}

function initState () {
    return { 
        token: localStorage.userJWT, 
        email: localStorage.userEmail, 
        id: localStorage.userId, 
        surname: localStorage.surname
    }
}

    或者，如果要在重新加载时保持整个Redux状态，可以尝试实现一些执行此操作的程序包，如redux-persist .

    回复于

相关问题