Object.assignを使用してオブジェクトの内部要素を更新する

Question

私のredux reducerのObject.assignを使用してオブジェクトの内部要素を更新するには少し助けが必要です。

シナリオをより詳しく説明するために、私はNBAチームを使用しています。私はreduxストアにNBAオブジェクトを持っています。私は現在、特定のチームのteamMembersだけを更新しようとしています。私の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は変数またはその他の式です。この種の操作がImmutableのようなライブラリと非常に簡単になるという

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

注：

はここで最終的な解決策です。