重新加载页面时 Redux 存储更改 [英] Redux store changes when reload page

问题描述

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

I am implementing login with two different type of users using react redux. This is my login method:

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));
});

1. 对于第一种类型的用户，我从后端返回:令牌、电子邮件、ID、姓氏.
2. 对于第二种类型的用户，我从后端返回:令牌、电子邮件、ID、类型.

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

I do some secured routes which the second type of user cannot access. So if the variable surname is returned, I define the specific route for that user.

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

If type variable is returned, it shows properly everything in links and in redux store as well. However, if I reload the page, then it automatically changes variable type into undefined surname.

这是我尝试在商店中保存 redux 状态的地方，即使我重新加载页面.const store = createStore(根减速器，composeWithDevTools(applyMiddleware(thunk)));

This is where I am trying to save the redux state in store even if I reload the page. 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 语句.提前致谢.

Can you please suggest why it is not following my if statement. Thank you in advance.

推荐答案

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

The Redux store/state is re-initialized on reload. You can keep your auth info in local storage, then pull that out to use as your initial state. That way, your Redux state will always have that auth information, even on reload.

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.

Or, if you want to keep your entire Redux state on reload, you can try to implement some package that does that, like redux-persist.

这篇关于重新加载页面时 Redux 存储更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！