Несколько обновлений для массива в редукторе redux

Question

Я создаю новое действие в магазине Redux. У меня есть список предметов, все из которых имеют свойство «overlayVis». Я хочу установить все из них в true, кроме указанного 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; 

Каждая итерация отменяет предыдущую итерацию так только одно изменение производится каждый раз, когда действие выполняется. Я попытался использовать «state» и «returnObj» вместо «... state», но он не сработал. Я не писал здесь в течение долгого времени, но у меня нет идей.

Любая помощь будет принята с благодарностью!

Answer 1

Я думаю, что ваша функция карты может быть изменена так, чтобы выглядеть так. Я могу только догадываться отсюда, но можете ли вы понять, работает ли это?

Функция карты используется для преобразования объектов в массив, и вам нужно вернуть значение в функции отображения для преобразования. Преобразованные значения сохраняются в новом массиве с именем 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; }) 
    ] 
    };