使用多个 redux 为每个应用程序用户存储一个

Zal*_*oza 6 reactjs redux react-redux

在反应本机应用程序中,我正在使用 redux。目前整个应用程序只有一个存储,我使用 redux-persist 将存储缓存到本地存储。

我的应用程序受用户名和密码保护,您必须创建帐户才能使用它。

现在我想提供一种功能,以便我的用户可以在他的帐户之间切换 - 如果他有多个帐户 - 。这造成了很多麻烦,因为现在每次用户在帐户之间切换时我都必须清除存储并重置状态。

所以我在考虑是否可以使用多个商店,每个用户一个?

例如我的应用程序状态看起来像

{
  chat:{},
  highscores:{},
  gameHistory:{},
}
Run Code Online (Sandbox Code Playgroud)

现在,如果用户有帐户,可以说User1@gmail.com状态将填充他的数据。他的状态将被保存到 LocalStorage,

一旦他切换到User2@gmail.com现在的帐户,我必须将应用程序重置为其初始状态,然后以某种方式从 localStorage 加载 User2 状态

我不希望每次用户在帐户之间切换时应用程序的状态都会丢失。

所以我正在考虑在这种情况下,使用多个 Redux Stores(每个用户一个)是一个不错的选择。

以前有人有过设计供多个用户使用的应用程序吗?我们如何在 redux 中做到这一点?

Zal*_*oza 3

好吧,上面的答案工作得很好,但由于我使用的是 ImmutableJs,拥有深度嵌套的对象确实很难处理。

所以我最终用 user_id 命名存储密钥。

所以现在当我切换用户时,我只需使用 localStorage 或 AsyncStorage 中的特定用户数据刷新整个存储。

我将 rootReducer 包装在一个简单的减速器中来处理这个问题。

function makeRootReducer(rootReducer){
 return function reducer(state, action){
   if(action.type==='SWITCH_USER'){
      //LOAD USER DATA..
      const data = JSON.parse(localStorage.getItem("store.user."+action.id)||"{}");
      return makeInitialData(data); //this just return initialData.
    }
    let newState = rootReducer(state, action);
    //simple save state to localStorage if state changed
    if(state !== newState)localStorage.setItem('store.user.'+state.user_id',JSON.stringify(newState);
    return newState;
  }

}
Run Code Online (Sandbox Code Playgroud)