Это правильный способ удалить элемент с помощью redux?

Я знаю, что я не должен изменять ввод и должен клонировать объект, чтобы изменить его. Я следовал соглашению, используемому в стартовом проекте redux, который использовал:

ADD_ITEM: (state, action) => ({
  ...state,
  items: [...state.items, action.payload.value],
  lastUpdated: action.payload.date
})

для добавления элемента - я использую распространение, чтобы добавить элемент в массив.

для удаления я использовал:

DELETE_ITEM: (state, action) => ({
  ...state,
  items: [...state.items.splice(0, action.payload), ...state.items.splice(1)],
  lastUpdated: Date.now() 
})

но это изменяет объект состояния ввода - это запрещено, даже если я возвращаю новый объект?

Нет. Никогда не изменяйте свое состояние.

Даже если вы возвращаете новый объект, вы все равно загрязняете старый объект, чего никогда не стоит делать. Это затрудняет сравнение старого и нового состояния. Например, в shouldComponentUpdateкотором react-redux используется под капотом. Это также делает невозможным путешествие во времени (то есть отмену и повтор).

Вместо этого используйте неизменяемые методы. Всегда используйте Array#sliceи никогдаArray#splice .

Я предполагаю из вашего кода, что action.payloadэто индекс удаляемого элемента. Лучше было бы следующее:

items: [
    ...state.items.slice(0, action.payload),
    ...state.items.slice(action.payload + 1)
],

Вы можете использовать метод фильтрации массива, чтобы удалить определенный элемент из массива без изменения исходного состояния.

return state.filter(element => element !== action.payload);

В контексте вашего кода это будет выглядеть примерно так:

DELETE_ITEM: (state, action) => ({
  ...state,
  items: state.items.filter(item => item !== action.payload),
  lastUpdated: Date.now() 
})

Метод ES6 Array.prototype.filterвозвращает новый массив с элементами, соответствующими критериям. Следовательно, в контексте исходного вопроса это будет:

DELETE_ITEM: (state, action) => ({
  ...state,
  items: state.items.filter(item => action.payload !== item),
  lastUpdated: Date.now() 
})

Еще один вариант неизменного редуктора DELETED для массива с объектами:

const index = state.map(item => item.name).indexOf(action.name);
const stateTemp = [
  ...state.slice(0, index),
  ...state.slice(index + 1)
];
return stateTemp;

Золотое правило состоит в том, что мы возвращаем не мутированное состояние, а новое состояние. В зависимости от типа вашего действия вам может потребоваться обновить дерево состояний в различных формах, когда оно попадет в редуктор.

В этом сценарии мы пытаемся удалить элемент из свойства состояния.

Это подводит нас к концепции неизменяемых паттернов обновления (или модификации данных) Redux. Неизменяемость является ключевым моментом, потому что мы никогда не хотим напрямую изменять значение в дереве состояний, а всегда делаем копию и возвращаем новое значение на основе старого значения.

Вот пример того, как удалить вложенный объект:

// ducks/outfits (Parent)

// types
export const NAME = `@outfitsData`;
export const REMOVE_FILTER = `${NAME}/REMOVE_FILTER`;

// initialization
const initialState = {
  isInitiallyLoaded: false,
  outfits: ['Outfit.1', 'Outfit.2'],
  filters: {
    brand: [],
    colour: [],
  },
  error: '',
};

// action creators
export function removeFilter({ field, index }) {
  return {
    type: REMOVE_FILTER,
    field,
    index,
  };
}

export default function reducer(state = initialState, action = {}) {
  sswitch (action.type) {  
  case REMOVE_FILTER:
  return {
    ...state,
    filters: {
    ...state.filters,
       [action.field]: [...state.filters[action.field]]
       .filter((x, index) => index !== action.index)
    },
  };
  default:
     return state;
  }
}

Чтобы лучше понять это, обязательно ознакомьтесь с этой статьей: https://medium.com/better-programming/deleting-an-item-in-a-nested-redux-state-3de0cb3943da