Aktualisieren eines inneren Elements eines Objekts mit Object.assign

Question

Ich brauche ein wenig Hilfe beim Aktualisieren eines inneren Elements eines Objekts mit Object.assign in meinem Redux Reducer.

Um das Szenario besser zu erklären, verwende ich NBA-Teams. Ich habe ein NBA-Objekt in meinem Redux-Shop. Ich versuche jetzt nur die TeamMembers für ein bestimmtes Team zu aktualisieren. Meine NBA Objekt sieht wie folgt aus:

{ 
    teams: [ 
     { 
      teamId: 123, 
      teamName: "Los Angeles Lakers" 
      teamMembers: [ 
      {id: "kbryant", fullName: "Kobe Bryant"}, 
      {id: "bingram", fullName: "Brandon Ingram"} 
      ] 
     }, 
     { 
      teamId: 234, 
      teamName: "Miami Heat" 
      teamMembers: [ 
      {id: "cbosh", fullName: "Chris Bosh"}, 
      {id: "tjohnson", fullName: "Tyler Johnson"} 
      ] 
     } 
    ] 
} 

ich beide teamid und Mitglieder des Minderer durch meine Aktion heißt action.teamId und action.members passieren.

Dies ist, was ich bisher:

Object.assign({}, state, { 
    nba: Object.assign({}, state.nba, { 
     teams: Object.assign({}, state.nba.teams, { 
     teamId[action.teamId] // I'm stuck here... 
     }) 
    }) 
}) 

Wie aktualisiere ich die Mitglieder einer bestimmten Mannschaft? Ich weiß, dass ich fast da bin, aber ich könnte ein wenig Hilfe gebrauchen. Vielen Dank.

Answer 1

Sie könnten den Code erweitern, den Sie mit einer dynamischen Indexeigenschaft hatten, mit der angegeben werden soll, welcher Eintrag im Array teams aktualisiert werden muss. Die ES6-Syntax ermöglicht dynamische Eigenschaften in Objektliteralen, indem der dynamische Ausdruck in eckige Klammern gesetzt wird: { [index]: value }, wobei index eine Variable oder ein anderer Ausdruck ist.

Hier ist die endgültige Lösung:

function getNewState(state, action) { 
 
    var index = state.nba.teams.findIndex(t => t.teamId == action.teamId); 
 
    if (index == -1) return state; // team not found 
 
    return Object.assign({}, state, { 
 
     nba: Object.assign({}, state.nba, { 
 
      teams: Object.assign([], state.nba.teams, { 
 
       [index]: Object.assign({}, state.nba.teams[index], { 
 
        teamMembers: action.teamMembers 
 
       }) 
 
      }) 
 
     }) 
 
    }); 
 
} 
 

 
var state = { 
 
    nba: { 
 
     teams: [{ 
 
      teamId: 123, 
 
      teamName: "Los Angeles Lakers", 
 
      teamMembers: [ 
 
       {id: "kbryant", fullName: "Kobe Bryant"}, 
 
       {id: "bingram", fullName: "Brandon Ingram"} 
 
      ] 
 
     }, { 
 
      teamId: 234, 
 
      teamName: "Miami Heat", 
 
      teamMembers: [ 
 
       {id: "cbosh", fullName: "Chris Bosh"}, 
 
       {id: "tjohnson", fullName: "Tyler Johnson"} 
 
      ] 
 
     }] 
 
    } 
 
}; 
 

 
var action = { teamId: 123, teamMembers: [{id: "lnance", fullName: "Larry Nance"}] }; 
 
var newState = getNewState(state, action); 
 
console.log(newState);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Beachten Sie, dass diese Art von Manipulation viel einfacher mit einer Bibliothek wie Immutable wird.