使用多个 redux store 每个应用程序用户一个

Question

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

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

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

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

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

{
  chat:{},
  highscores:{},
  gameHistory:{},
}

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

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

加载 User2 状态

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

所以我考虑的可能是在这种情况下，使用多个 Redux Store 是一个不错的选择，每个用户一个。

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

Answer 1

我不认为为每个用户都有一个商店是个好主意。请参阅此 SO 答案：

为什么不按用户 ID 为 reducer 中的数据命名空间？像这样：

{
  currentUserId: "1",
  chat:{ "1": { // Chats for user id 1 }, "2": { // Chats for user id 2 }},
  highscores:{ // Same structure as above },
  gameHistory:{ // Same structure as above },
}

切换用户账号时，只需更新状态下的currentUserId即可。

我建议使用选择器来封装从存储中读取数据的逻辑。

获取当前帐户所有聊天记录的简单选择器可能如下所示：

const getCurrUserId = state => state.currentUserId

const getChats = state => {
   const userId = getCurrUserId(state);
   return state.chat[userId];
}

然后，您可以在 mapStateToProps 中使用简单的 getChats 选择器将数据传递给您的组件。通过这种方式，您封装了从状态中检索数据的逻辑，您的组件不需要知道这些细节，因此您可以根据需要自由更改策略。

Answer 2

上面的回答很好，但由于我使用的是 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;
  }

}

使用多个 redux store 每个应用程序用户一个

using multiple redux stores one for each app user

reactjs

redux

react-redux