Массив приставки не обновляется правильно

Question

В редуксе у меня есть массив selectedItems и changedItems

selectedItems: ["element 0","element 1","element 2"]

changedItems: ["element 6","element 7","element 8"]

<Button onClick={() => this.props.addItem(this.props.changedItems)}>save</Button>

У меня есть кнопка, которая запускает действие addItem, но это толкает 1 элемент в массив selectedItems из массива changedItems вместо всех 3 элементов, а также я хотел бы, чтобы он полностью удалил все существующие элементы в selectedItems массив, когда это будет сделано

Как я могу поместить sh все элементы из массива changedItems в массив selectedItems и перезаписать существующие элементы в массиве selectedItems?

действий. js

export const addItem = (item) => ({
  type: ADD_ITEM,
  item,
})

export const removeItem = (item) => ({
  type: REMOVE_ITEM,
  item,
})

export const clearItems = () => ({
  type: CLEAR_ITEMS,
})


export const addChangedItem = (item) => ({
  type: ADD_CHANGED_ITEM,
  item,
})

export const removeChangedItem = (item) => ({
  type: REMOVE_CHANGED_ITEM,
  item,
})

selectedItemReducer. js

import {
  ADD_ITEM, CLEAR_ITEMS, REMOVE_ITEM,
} from '../Constants'

const selectedItemReducer = (state = [], action) => {
  switch (action.type) {
    case ADD_ITEM:
      return [
        ...state,
        action.item,
      ]
    case REMOVE_ITEM:
      return state.filter((item) => item !== action.item)
    case CLEAR_ITEMS:
      return []
    default:
      return state
  }
}

export default selectedItemReducer

ChangeItemReducer. js

import {
  ADD_CHANGED_ITEM, REMOVE_CHANGED_ITEM,
} from '../Constants'

const changedItemReducer = (state = [], action) => {
  switch (action.type) {
    case ADD_CHANGED_ITEM:
      return [
        ...state,
        action.item,
      ]
    case REMOVE_CHANGED_ITEM:
      return state.filter((item) => item !== action.item)
    default:
      return state
  }
}

export default changedItemReducer

Answer 1

Если changedItems гарантированно всегда будет массивом, вы должны вернуть эти значения в редуктор. Судя по вашему changedItemReducer, это выглядит так.

const selectedItemReducer = (state = [], action) => {
  switch (action.type) {
    case ADD_ITEM:
      return action.item;
    case REMOVE_ITEM:
      return state.filter((item) => item !== action.item)
    case CLEAR_ITEMS:
      return []
    default:
      return state
  }
}

Если не всегда массив, проверьте сначала. Если массив, вернуть его, если не массив, поместить элемент в массив и вернуть его.

const selectedItemReducer = (state = [], action) => {
  switch (action.type) {
    case ADD_ITEM:
      return Array.isArray(action.item) ? action.item : [item];
    case REMOVE_ITEM:
      return state.filter((item) => item !== action.item)
    case CLEAR_ITEMS:
      return []
    default:
      return state
  }
}

В обоих случаях вы «выбрасываете» старое состояние при сохранении (возвращении) нового » измененные предметы ".