Aktualisieren eines verschachtelten Zustand in redux mit Object.assign

Question

Mein aktueller Zustand ist:

s1:

[ 
{primaryKey : 123, 
otherKeys: value 
: 
otherkeys... 
}, 
{ 
primaryKey : 345, 
otherKeys: value 
: 
:otherKeys... 
}, 
{ 
primarykey : 567, 
otherKeys... 
}, 
{ 
primaryKey : 789, 
otherKeys... 
} 
] 

Ich möchte 1 die Elemente bei Index 0 und Index aktualisieren mit

s2:

[ 
{primaryKey : 123, 
updatedKeys: value 
: 
otherkeys... 
}, 
{ 
primaryKey : 345, 
updatesKeys: value 
: 
:otherKeys... 
} 
] 

Nach meinem Zustand der Aktualisierung sollte wie folgt aussehen:

[ 
{primaryKey : 123, 
updatedKeys: value 
: 
otherkeys... 
}, 
{ 
primaryKey : 345, 
updatedKeys: value 
: 
:otherKeys... 
}, 
{ 
primarykey : 567, 
otherKeys... 
}, 
{ 
primaryKey : 789, 
otherKeys... 
} 
] 

habe ich versucht, über das Statusobjekt und Object.assign auf ihrem primaryKey Spiel zu neuem Objekt iterieren.

Ich bin verwirrt, gibt es einen besseren Weg, dies zu tun, außer mit Karte zweimal?

Answer 1

Für Elemente eines Arrays und ES6 Syntax, die Verbreitung Betreiber zur Änderung ist ziemlich idiomatische:

var newArray = [ 
    ...list.slice(0, indexOfElement), 
    amendedElement 
    ...list.slice(indexOfElement+1) 
]; 

Also, würden Sie den Index des Elements finden müssen, um einen Klon erstellen und ändern es und dann ein neues Array zurück, das wie oben konstruiert wird.

fiddle

Dit:

https://egghead.io/lessons/javascript-redux-avoiding-array-mutations-with-concat-slice-and-spread

es erklärt, es brillant.

Answer 2

Wenn Sie offen dafür sind, Ihre Datenstruktur von einem Array von Objekten zu einem Objekt zu ändern, das mit ID codiert ist, dann sind Sie damit einverstanden, Ihre Updates weiter zu vereinfachen.

Einfach ausgedrückt: Sie verwenden den Primärschlüssel als die Schlüssel-ID für Wach Ihrer Elemente. Dies funktioniert ähnlich wie der Index eines normalen Arrays, bedeutet aber, dass Sie die Zahl durch einen gültigen Bezeichner ersetzen können.

Doing so would allow you to update your state by using:

s1 = { 
    ...s1, 
    ...s2 
} 

Änderungen würden Sie Ihren Zustand vornehmen:

ändern Ihre aktuellen Zustand s1:

// it is now an object whose keys are now the primary key 
{ 
    [123]{ 
    otherKeys: value 
    : 
    otherkeys... 
    }, 
    [345]{ 
    otherKeys: value 
    : 
    :otherKeys... 
    }, 
    [567]{ 
    otherKeys... 
    }, 
    [789]{ 
    otherKeys... 
    } 
} 

Amend Ihre neue s2 s folgt:

// again, it is now an object whose keys are now the primary key 
{ 
    [123]{ 
    updatedKeys: value 
    : 
    otherkeys... 
    }, 
    [345]{ 
    updatedKeys: value 
    : 
    :otherKeys... 
    } 
} 

Verwendung der su ggested Ausbreitung Syntax an der Spitze können Sie s1 mit s2 auf das folgende Update:

{ 
    [123]{ 
    updatedKeys: value 
    : 
    otherkeys... 
    }, 
    [345]{ 
    updatedKeys: value 
    : 
    :otherKeys... 
    }, 
    [567]{ 
    otherKeys... 
    }, 
    [789]{ 
    otherKeys... 
    } 
} 

---

---

Als Reaktion auf @ nitte93user3232918 die zusätzliche Frage in den Kommentaren über wie von s1 Array von Objekt konvertieren ein Objekt von Objekten:

let newS1 = {}; 
s1.map((val,i) => { 
    newS1 = { 
    ..s1, 
    [val.primarykey]:val 
    } 
}); 

Answer 3

Mit Object.assign sollte bequem sein, w um dies zu tun.

Wenn Ihr Zustand ist in der Form eines Arrays dies der beste Weg sein sollte:

var newState = Object.assign([], s1, s2); 

Dies kombiniert die aktualisierten Zustandswerte von s2 in s1.

Sehen Sie folgendes Beispiel: http://www.es6fiddle.net/ivxsln91/