Це правильний спосіб видалення елемента за допомогою скорочення?

Я знаю, що я не повинен мутувати вхід і повинен клонувати об'єкт, щоб його мутувати. Я дотримувався конвенції, застосованої у проекті редукційного старту, який використовував:

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() 
})

Ще один варіант незмінного редуктора "ВІДКРИТИ" для масиву з об'єктами:

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