如何清除redux状态的数组以进行多选

Question

提前致谢。如果用户点击清除按钮，我需要清除我的redux状态数组。当他们点击每个图像时，该项目被添加到redux状态数组，并且所选项目在UI中获得边框。我有一个清除按钮，清除用户选择。我该怎么做？

我的行动和减少者如下：

行动

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

我是否必须维护一个单独的reducer和动作来清除这个状态数组？我怎样才能做到这一点。我更喜欢拥有代码支持，因为我很反应native和redux。

再次感谢您的检查。

Answer 1

只需添加一个删除案例：

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

或者甚至像这样，如果可能的话：

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

Answer 2

请尝试下面的代码。

操作：

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