Reduxレデューサーの動的キー注入

Question

まず、これは突然変異した状態変化であると理解しています。私は私に恥を知っている。時には正しい方法が賢明でないように見えるか、少なくとも私はそれ以上よく分かりません。

事前に定義された項目の古い状態と新しい状態を作成したり交換したりすることなく、自分の状態にキーを挿入することはできません。私は単にしばらくの間、キーを注入したいと思います。もし私がしなければ、それらはすべてとにかくクリアされます。私の減速は、このようになります

{graphSite: {site: "default", graphBrowser: { graphID: '', graphKey:'' }, browsable:[] }}; 

のように私の初期状態は、だから、これは動作しますが、閲覧可能な配列であるもののReduxのdevのツールは、状態の変化を示すdoesntのバベルES7オブジェクト広がりオペレータに

case BROWSER: { state.graphSite.browsable[action.id] = action.payload 
       return {...state} 
       } 

を使用して**に見えますツールで正しく

case BROWSER: { state.graphSite.browsable[action.id] = action.payload 
         return {...state, 
           graphSite: {...state.graphSite, 
            graphBrowser: {...state.graphSite.graphBrowser}, 
            browsable: {...state.graphSite.browsable} } 
           } 
          } 

今閲覧可能な番組が、理想的に私はこれらのsがある：私は木目に対して行ってきましたので、私はへの変更を拡張する場合のアクセスは、おそらくこれがありますアメ事。

したがって、最初のストア状態にないダイナミックキーの状態を操作する最善の方法は何ですか。これは、私が元の状態を操作したので、何かが間違っているように感じるだけです。

Answer 1

タイトルが私を最初に混乱させました。 dynamic key injection私のためにあまりにも派手な音：P。

とにかく、新しいペアを実際にbrowserbleに追加します。 あなたは持っていた：これは間違っている

case BROWSER: { state.graphSite.browsable[action.id] = action.payload 
      return {...state} 
      } 

あなたが直接stateオブジェクトを変更しているので、（stateフォーム減速パラメータが来ると仮定した場合）。

還元性の原理の1つはChanges are made with pure functionsです。 （reduxドキュメント）。

FTFY：

case BROWSER: { 
    const nextState = JSON.parse(JSON.stringify(state)); // deep copy your state 
    nextState.graphSite.browsable[action.id] = action.payload 
    return nextState 
} 

これはJSON操作が高価であり、最もeffecientコードではありません。状態オブジェクトを直接変更しないという原則を実証するだけです。

Answer 2

いいえ、オブジェクトのコンテキストでは、変数キーを追加する方法と、初期ストア状態を作成しない方法が分かりませんでした。これは、状態をコピーしてから、そのように追加して返すとかなり簡単です。どちらも、元の状態を変更していない状態です。

case BROWSER: { let browser = {...state} 
         browser.graphSite.browsable[action.id] = action.payload 
         return {...state, 
           graphSite: {...state.graphSite, 
            graphBrowser: {...state.graphSite.graphBrowser}, 
            browsable: {...browser.graphSite.browsable} 
            } 
           } 
          } 

なしダウン投票の非構造のためのあなたの右のおかげで、私はまた、私はこれらが、練習のためにチェックするためにdeepFreezeまたは不変のようなものを使用することができます実現偉大ここ

case BROWSER: { let {graphSite: {browsable: browser}} = state 
         browser[action.id] = action.payload 

         return {...state, 
           graphSite: {...state.graphSite, 
            graphBrowser: {...state.graphSite.graphBrowser}, 
            browsable: {...browser} 
            } 
           } 
          } 

機能しません。