Entwerfen eines effizienten Reduzierers für einen großen Zustand mit Redux

Question

Ich verwende Redox mit reagieren und Typoskript für meine Anwendung. Ich arbeite mit vielen Artikeln, die an verschiedenen Orten meiner App verwendet werden. Mein Zustand sieht wie folgt aus:

{ 
    items: {42: {}, 53: {}, ... }, //A large dictionary of items 
    itemPage1: { 
     items: [42, 34, 67, ...], 
     ... 
    }, 
    itemPage2: { ... 
    }, 
    ... 
} 

Ich möchte ein effizientes Element Minderer schreiben, aber die Einzelteile sind groß und ich kann jedes Mal nicht schaffen tiefe Kopien. Offenbar muss ich nicht nach gaearon (extrahiert von there): Redux fordert Sie nicht auf, den Zustand bei jeder Aktion tief zu klonen. Sie werden nur aufgefordert, neue Objekte für die geänderten Teile zurückzugeben. Sie können den vorherigen Status für alle Teile der Struktur, die nicht geändert wurden, wiederverwenden..

Das ist großartig! Allerdings bin ich neu in all dem und ich bin mir nicht sicher, wie man den Reducer richtig einsetzt. Was ich bisher in meinem Artikel Minderer habe, ist dies:

case UPDATE_ITEM_LABEL: 
    return (<any>Object).assign({}, state, { 
      item_id: (<any>Object).assign({}, state[action.item_id], { 
       label: action.value 
      }) 
    }) 

So kopiert er alle das Element des alten Zustandes in ein neues Objekt, und dann mit einem geändertenen Objekt mit dem neuen aktualisierten Wert das Ergebnis fusionieren. Meine Hoffnung ist, dass die Artikel während der ersten assign als Referenz weitergegeben werden und daher nicht tief kopiert werden? Wenn dies der Fall ist, wäre das in Ordnung, da ich es mir leisten kann, einen Gegenstand und einige einfache Referenzen für jede Aktion tief zu kopieren. Auch ich fand, dass es möglich war, immutable.js zu verwenden, um dieses Problem zu lösen, wenn die Methode, die ich vorschlage, funktioniert, warum würden Leute immutable.js benutzen?

Answer 1

Ich habe einen schnellen Test, um sicherzustellen, daß meine Methode die Arbeit tat:

var item1 = {prop1: 'item1', prop2: 'haha'}; 
var item2 = {prop1: 'item2', prop2: 'hehe'}; 
var items = {1:item1, 2:item2}; 

console.log(items); 

Diese Anzeige als erwartet:

[object Object] { 
    1: [object Object] { 
    prop1: "item1", 
    prop2: "haha" 
    }, 
    2: [object Object] { 
    prop1: "item2", 
    prop2: "hehe" 
    } 
} 

Jetzt sind wir assign verwenden den nächsten Zustand zu erhalten für Element2 einen des Schlüssels modifizierende:

var items = Object.assign({},items, { 2: Object.assign({}, items[2], 
    { 
     prop2: 'huhu' 
    }) 
}); 

console.log(items); 

diese Anzeige wie erwartet:

[object Object] { 
    1: [object Object] { 
    prop1: "item1", 
    prop2: "haha" 
    }, 
    2: [object Object] { 
    prop1: "item2", 
    prop2: "huhu" 
    } 
} 

Nun ist die interessante Bit, wenn wir die anfängliche Bezugnahme auf item1 und item2 verwenden, um die prop1 Eigenschaften zu verändern:

item1.prop1 = 'ITEM1' 
item2.prop1 = 'ITEM2' 

console.log(items); 

Wir finden heraus, dass item2 nur tief kopiert wurde, die das Verhalten Ich möchte :

[object Object] { 
    1: [object Object] { 
    prop1: "ITEM1", 
    prop2: "haha" 
}, 
    2: [object Object] { 
    prop1: "item2", 
    prop2: "huhu" 
    } 
}