javascript - 連想配列 - Reduxの特定の配列項目内の単一の値を更新する方法




javascript 配列 検索 (4)

Reduxステートでこの種の操作が必要な場合 、スプレッド演算子はあなたの友人で あり、このプリンシパルはすべての子供に適用されます。

これがあなたの状態であるふりをしましょう:

const key = "ravenclaw";
  return {
    ...state, // copy state
    houses: {
      ...state.houses, // copy houses
      [key]: {  // update one specific house (using Computed Property syntax)
        ...state.houses[key],  // copy that specific house's properties
        points: state.houses[key].points + 3   // update its `points` property
      }
    }
  }

そして、あなたはRavenclawに3ポイントを追加したい

 const key = "ravenclaw"; return { ...state, // copy state houses: { ...state.houses, // copy houses [key]: { // update one specific house (using Computed Property syntax) ...state.houses[key], // copy that specific house's properties points: state.houses[key].points + 3 // update its `points` property } } } 

スプレッド演算子を使用することで、新しい状態のみを更新し、他のすべてをそのまま残すことができます。

この すばらしい記事 から取られた例では、 素晴らしい 例でほとんどすべての可能なオプションを見つけることができます。

状態を再レンダリングするとUIの問題が発生する問題があり、ページ上の再レンダリングの量を減らすために、reduce内の特定の値のみを更新するよう提案されました。

これは私の状態の例です

{
 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 は新しい値を含む配列全体です。 しかし、実際には、contents配列の2番目の項目のテキストを更新するだけでよく、このようなものは機能しません

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

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


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

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

私の場合、ルイスの答えに基づいて、次のようなことをしました。

const state = {
    houses: {
        gryffindor: {
          points: 15
        },
        ravenclaw: {
          points: 18
        },
        hufflepuff: {
          points: 7
        },
        slytherin: {
          points: 5
        }
    }
}

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




redux