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

Question

我正在使用 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));
});

对于第一类用户，我从后端return：token、email、id、surname。
对于第二类用户，我从后端return：token、email、id、type。

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

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

这是我尝试在商店中保存 redux 状态的地方，即使我重新加载页面也是如此。 const store = createStore( 根减速器， 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 语句。提前谢谢你。

Answer 1

Redux store/state 在重新加载时重新初始化。您可以将您的身份验证信息保存在本地存储中，然后将其拉出以用作您的初始状态。这样，您的 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。

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

Redux store changes when reload page

store

reactjs

redux