Redux - удалить элемент из массива - PullRequest
Новая
       6

Redux - удалить элемент из массива

0 голосов
/ 11 сентября 2018

У меня есть уменьшение, поэтому ACTION_ADD_PRODUCTS вызывает список продуктов, действие ACTION_ADD_TO_CARD вызывает добавление продуктов в карту, а ACTION_REMOVE_FROM_CARD следует удалить с карты, но я не могу понять, как заставить ACTION_REMOVE_FROM_CARD вернуть, что при нажатии на одиниз кнопок удаления, элемент должен быть удален из массива карт; 

const initialState = {
  products: [],
  card: []
}

export const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case ACTION_ADD_PRODUCTS:
      return {...state, 
        products: action.payload}
    case ACTION_ADD_TO_CARD:
      return {
        ...state,
        card: [...state.card,  action.payload]
      }
    case ACTION_REMOVE_FROM_CARD:         
      return {
        card: [...state.card,  action.payload]
      }
    default:
  }
  return state;
};

Ответы [ 2 ]

0 голосов
/ 11 сентября 2018

Когда дело доходит до удаления элементов из массива в редукторе, я обычно передаю индекс как actiin.payload, а затем просто использую array.splice (index, 1) для удаления элемента.В вашем случае: 

case ACTION_REMOVE_FROM_CARD: 
    let newCard = Object.assign([], this.state.card)
    newCard.splice(action.payload, 1) 
    return { card: [...state.card, newCard] }

Помните, что action.payload будет вашим индексом желаний, который вы передадите от действия компонента.Надеюсь, это поможет.

0 голосов
/ 11 сентября 2018

При удалении предмета необходимо передать дополнительную информацию редуктору, будь то index или id предмета.

Если его индекс, вы можете просто использовать slice 

case ACTION_REMOVE_FROM_CARD:  
      const index = action.payload.index      
      return {
        ...state,
        card: [...state.card.slice(0, index), ...state.card.slice(index + 1)]
      }

иначе, если вы передадите идентификатор, вы можете использовать фильтр 

case ACTION_REMOVE_FROM_CARD:  
      const id = action.payload.id      
      return {
          ...state,
          card: state.card.filter((card) => card.id !== id)
      }

P.S. Также не забудьте вернуть другие параметры состояния, а не только card внутри объекта.

...