使用Object.assign更新對象的內部元素

Question

我需要一點幫助，在我的redux reducer中使用Object.assign更新對象的內部元素。

爲了更好地解釋場景，我使用了NBA球隊。我在我的redux商店有一個NBA對象。我現在只想更新特定團隊的團隊成員。我的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"} 
      ] 
     } 
    ] 
} 

我通過行動即action.teamId和action.members同時通過teamId和成員的減速。

這是我到目前爲止有：

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

如何更新特定團隊的teamMembers？我知道我幾乎在那裏，但可以使用一點幫助。謝謝。

Answer 1

您可以使用動態索引屬性擴展您的代碼，該屬性旨在確定teams陣列中哪些條目需要更新。通過將動態表達式包裝在方括號中，ES6語法允許在對象文字中使用動態屬性，如下所示：{ [index]: value }，其中index是一個變量或其他表達式。

下面是最終的解決方案：

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

注意，這種操作變得更容易像Immutable圖書館很多。