Как очистить массив в избыточном состоянии для множественного выбора

Question

Заранее спасибо. Мне нужно очистить массив избыточных состояний, если пользователь нажимает кнопку очистки. Когда они попадают на каждое изображение, элемент добавляется в массив состояний редукса, и выбранный элемент получает границу в пользовательском интерфейсе. У меня есть кнопка Очистить, которая очищает выбор пользователя. Как мне это сделать?

Мои действия и редукторы приведены ниже:

Действие

export const selectedItem = (selectedItem ) => {
    return {
        type: 'selected_Item',
        payload:selectedItem 
    }
}

Переходники

import _, { map, isEmpty } from 'lodash'

const INITIAL_STATE = {
    itemList: []
}

export default (state = INITIAL_STATE, action) => { 
    console.log('REDUX__ '+action.payload)
    switch (action.type) {
        case 'selected_Item':

        var idx = _.findIndex(state.itemList, function(o) { return o.ITEMID== action.payload.ITEMID; }); 
        if(idx!==-1){
            state.itemList.splice(idx, 1) 
            return { ...state, itemList: [...state.itemList] }
        }       
            return { ...state, itemList: [...state.itemList, action.payload] }


        default:
            return state;
    }
}

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

Еще раз спасибо за проверку.

Answer 1

Попробуйте код ниже.

Действия:

export const selectedItem = (selectedItem) => {
    return {
        type: 'selected_Item',
        payload:selectedItem 
    }
}

export const clearItems = () => {
    return {
        type: 'clear_Items'
    }
}

Редукторы:

import _, { map, isEmpty } from 'lodash'

const INITIAL_STATE = {
    itemList: []
}

export default (state = INITIAL_STATE, action) => { 
    console.log('REDUX__ '+action.payload)
    switch (action.type) {
        case 'selected_Item':
          var idx = _.findIndex(state.itemList, function(o) { return o.ITEMID== action.payload.ITEMID; }); 
          if(idx!==-1){
              state.itemList.splice(idx, 1) 
              return { ...state, itemList: [...state.itemList] }
          }       
              return { ...state, itemList: [...state.itemList, action.payload] }
        case 'clear_Items':
          return {
            ...state,
            itemList: []
          }
        default:
            return state;
    }
}

Answer 2

Просто добавьте регистр для удаления:

case 'delete_items':
  return { ...state, itemList: [] }

Или даже так, если это возможно:

case 'delete_items':
  return { ...INITIAL_STATE }