Redux reducer dynamic key injection

Question

Zunächst verstehe ich, dass dies eine mutierte Zustandsänderung ist; Ich weiß Beschämung über mich. Manchmal scheint der richtige Weg nicht der klügste zu sein oder ich weiß es zumindest nicht besser.

Lassen Sie mich erklären, ich möchte Schlüssel in meinen Zustand injizieren, ohne alten Zustand und neuen Zustand für vordefinierte Elemente zu erstellen und auszutauschen. Ich möchte einfach für eine Weile die Schlüssel injizieren und wenn nicht, dann sind sie sowieso alle gelöscht. Mein Ausgangszustand sieht aus wie

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

mein Minderer wie folgt aussieht ** mit babel ES7 Spread Operator So

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

Objekt, das wird funktionieren, aber redux dev Tools leider nicht die Zustandsänderung zeigen, wenn die durchsuchbaren Array zugänglich vielleicht ist das, weil ich gegen den Strich ging, obwohl, wenn ich die Änderungen zu verlängern:

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

jetzt durchsuchbar zeigt korrekt in dem Werkzeug, sondern im Idealfall ich das ist die s ame Sache.

Die Frage ist also, was der beste Weg ist, um den Zustand für dynamische Schlüssel zu manipulieren, die nicht im ursprünglichen Speicherzustand sind. Das funktioniert einfach so, als würde ich etwas falsch machen, weil ich den ursprünglichen Zustand manipuliert habe.

Answer 1

Der Titel verwirrt mich in erster Linie. dynamic key injection klingt viel zu schick für mich: P.

Wie auch immer, Sie möchten tatsächlich ein neues Paar zu Ihrem browserble hinzufügen. Sie haben:

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

Das ist falsch (unter der Annahme state Form Minderer Parameter kommt), da Sie direkt modifizieren die state Objekt.

Eines der Redox-Prinzip ist das Changes are made with pure functions. (redux Dokumente).

FTFY:

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

Dies ist nicht die meisten effecient Code, sind JSON Operationen teuer. Es ist nur um das Prinzip zu demonstrieren, das Zustandsobjekt nicht direkt zu mutieren.

Answer 2

In Ordnung, ich konnte im Kontext der Objektverteilung nicht sehen, wie variable Schlüssel anhängen und ohne initiale Speicherzustände erstellt werden. Dies ist ziemlich einfach nach dem Kopieren des Zustands, dann das Zurückgeben der angehängten wie folgt; beide funktionierten, dieser ändert gerade den ursprünglichen Zustand nicht.

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

Kein rechten Dank für die Abwärtsbewertung Destrukturierung funktioniert super hier

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

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

Ich weiß, auch ich so etwas wie Tiefkühltruhe oder unveränderlich verwenden könnte für diese zu überprüfen, aber zu üben.