還元レデューサーの配列に対する複数の更新

Question

私はReduxストアで新しいアクションを作成しています。 私はすべてが "overlayVis"の特性を持つ項目のリストを持っています。私は指定されたIDを除いて、これらのすべてを真に設定したい。現在の実装は

case ITEM_OVERLAY_TOGGLE: 
    // object to be updated and returned 
    var returnObj = state.data; 

    state.data.map((item) => { 
    if (item.id === action.id) { 
     returnObj = Object.assign({}, ...state, { 
     data: [ 
      ...state.data.slice(0, item.id), 
      Object.assign({}, ...state.data[item.id], {overlayVis: false}), 
      ...state.data.slice(item.id + 1)] 
     }); 
    } else if (!item.overlayVis) { 
     returnObj = Object.assign({}, ...state, { 
     data: [ 
      ...state.data.slice(0, item.id), 
      Object.assign({}, ...state.data[item.id], {overlayVis: true}), 
      ...state.data.slice(item.id + 1)] 
     }); 
    } 
    }); 

    return returnObj; 

です。各繰り返しは前回の反復よりも優先されるため、アクションが実行されるたびに1回だけ変更されます。私は "... state"の代わりに "state"と "returnObj"を使用しようとしましたが、うまくいきませんでした。私は長い時間ここに投稿していないが、私はアイデアがありません。

ご協力いただきますようお願い申し上げます。

Answer 1

地図の機能をこのように変更することができます。私はここからしか推測することはできませんが、これが動作するかどうかを確認できますか？

Map関数は配列内のオブジェクトを変換するために使用され、マップ関数内で値を返す必要があります。変換された値は、newDataという新しい配列に格納されます。それは外に返されます。

case ITEM_OVERLAY_TOGGLE: 
    var newData = state.data.map((item) => { 
    if (item.id === action.id) { 
     return { 
      ...item, 
      overlayVis:false 
     } 
    } else { 
     return { 
       ...item, 
       overlayVis : true 
     } 
    } 
    }); 

return { 
    ...state, 
    data: newData 
    } 

編集：action.idはまた、配列のインデックスであるならば、私はちょうどユーレカの瞬間があったと思います。この

case ITEM_OVERLAY_TOGGLE: 
    // object to be updated and returned 

    return { 
    ...state, 
    data : [ 
     ...state.data.slice(0,action.id).map(i=>{ i.overlayVis = true, return i; }), 
     state.data[action.id].overlayVis=false, 
     ...state.data.slice(action.id+1).map(i=>{ i.overlayVis = true, return i; }) 
    ] 
    };