[解決済み] reduxで特定の配列アイテムの中の単一の値を更新する方法

質問

私は状態の再レンダリングがUIの問題を引き起こすという問題を抱えており、ページ上での再レンダリングの量を減らすために、私のreducerの内部で特定の値のみを更新することを提案されました。

これは私の状態の例です。

{
 name: "some name",
 subtitle: "some subtitle",
 contents: [
   {title: "some title", text: "some text"},
   {title: "some other title", text: "some other text"}
 ]
}

で、現在このように更新しています。

case 'SOME_ACTION':
   return { ...state, contents: action.payload }

ここで action.payload は新しい値を含む配列全体です。しかし、実際にはコンテンツ配列の2番目の項目のテキストを更新する必要があり、次のようなものは動作しません。

case 'SOME_ACTION':
   return { ...state, contents[1].text: action.payload }

ここで action.payload は、現在、更新に必要なテキストです。

解決方法は？

を使用することができます。 React Immutabilityヘルパー

import update from 'react-addons-update';

// ...    

case 'SOME_ACTION':
  return update(state, { 
    contents: { 
      1: {
        text: {$set: action.payload}
      }
    }
  });

とはいえ、もっとこういったことをやっているのではと思うのですが？

case 'SOME_ACTION':
  return update(state, { 
    contents: { 
      [action.id]: {
        text: {$set: action.payload}
      }
    }
  });