javascript 連想配列 特定の配列item内の単一の値をreduxで更新する方法



javascript 配列 検索 (3)

mapを使用できます。 次に実装例を示します。

case 'SOME_ACTION':
   return { 
       ...state, 
       contents: state.contents.map(
           (content, i) => i === 1 ? {...content, text: action.payload}
                                   : content
       )
    }

私は、状態の再レンダリングがUI問題を引き起こす問題があり、ページの再レンダリングの量を減らすために、減速機内の特定の値を更新するよう提案されました。

これは私の状態の例です

{
 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 Immunabilityヘルパーを使うことができます

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

すべてを1行で行う必要はありません。

case 'SOME_ACTION':
  const newState = { ...state };
  newState.contents = 
    [
      newState.contents[0],
      {title: newState.contnets[1].title, text: action.payload}
    ];
  return newState




redux