複数のreduxストアを各アプリユーザーに1つずつ使用

Question

反応するネイティブアプリでは、私はreduxを使用しています。現在のところ、アプリケーション全体が単一のストアを持っており、私はstorestorageへのキャッシュストアにredux-persistを使用しています。

私のアプリはユーザー名とパスワードで保護されているため、アカウントを作成して使用する必要があります。

今、私は自分のアカウントを切り替えることができるように能力を提供したいと思っています。これは、ユーザー間でアカウントを切り替えるたびにストレージをクリアし、状態をリセットする必要があるため、多くの問題を引き起こしています。

私は複数の店舗を使用することができると考えていました。

ユーザーはアカウントが状態が彼のデータが取り込まれますUser1@gmail.com言うことができますしている場合、たとえば私のアプリの状態は今

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

のように見えます。そして彼の状態は

iはアプリの状態をたくない、彼は今、私はその初期状態にアプリをリセットする必要がUser2@gmail.comにアカウントを切り替えると

が、その後、何らかの形でのlocalStorage

からUser2の状態をロードする、のlocalStorageに保存されますユーザーがアカウント間を切り替えるたびに失われます。

だから私は、この場合、複数のReduxストアを使用するのは良い選択だと考えていました。

誰も以前に複数のユーザーが使用するように設計されたアプリを持っていましたか？ 私たちはこれをreduxでどうやって行うことができますか？

Answer 1

うまく答えがうまくいきますが、私は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; 
    } 

} 

Answer 2

私は各ユーザーのための店を持つことは良いアイデアだとは思わない。これを参照してください答え：https://stackoverflow.com/a/33633850/3794660

あなたはあなたのIDであなたのレデューサーに持っているデータを名前空間にしませんか？このようなもの：

{ 
    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 }, 
} 

ユーザーアカウントを切り替えると、その状態の現在のユーザーIDを更新するだけです。

セレクタを使用して、ストアからデータを読み込むロジックをカプセル化することをお勧めします。

現在のアカウントのすべてのチャットは、次のようになります取得するには、単純なセレクタ：

const getCurrUserId = state => state.currentUserId 

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

次に、あなたのコンポーネントにデータを渡すためにあなたのmapStateToPropsであなたの簡単なgetChatsセレクタを使用しています。このようにして、ロジックをカプセル化して状態からデータを取得し、コンポーネントがこれらの詳細を知る必要がないため、必要に応じて戦略を自由に変更できます。