¿Es esta la forma correcta de eliminar un artículo usando redux?

Sé que se supone que no debo mutar la entrada y debo clonar el objeto para mutarlo. Estaba siguiendo la convención utilizada en un proyecto de inicio redux que usaba:

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

para agregar un elemento: obtengo el uso de spread para agregar el elemento en la matriz.

para borrar utilicé:

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

pero esto está mutando el objeto de estado de entrada, ¿está prohibido aunque estoy devolviendo un nuevo objeto?

No. Nunca mutes tu estado.

A pesar de que está devolviendo un objeto nuevo, todavía está contaminando el objeto anterior, lo que nunca querrá hacer. Esto hace que sea problemático al hacer comparaciones entre el estado antiguo y el nuevo. Por ejemplo, en el shouldComponentUpdateque react-redux se usa debajo del capó. También hace imposible viajar en el tiempo (es decir, deshacer y rehacer).

En su lugar, use métodos inmutables. Utilizar siempre Array#slicey nunca Array#splice.

Supongo de su código que action.payloades el índice del elemento que se elimina. Una mejor forma sería la siguiente:

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

Puede utilizar el método de filtro de matriz para eliminar un elemento específico de una matriz sin alterar el estado original.

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

En el contexto de su código, se vería así:

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

El Array.prototype.filtermétodo ES6 devuelve una nueva matriz con los elementos que coinciden con los criterios. Por lo tanto, en el contexto de la pregunta original, esto sería:

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

Otra variación del reductor inmutable "ELIMINADO" para la matriz con objetos:

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

La regla de oro es que no devolvemos un estado mutado, sino un nuevo estado. Dependiendo del tipo de su acción, es posible que deba actualizar su árbol de estado en varias formas cuando llegue al reductor.

En este escenario, estamos intentando eliminar un elemento de una propiedad estatal.

Esto nos lleva al concepto de patrones inmutables de actualización (o modificación de datos) de Redux. La inmutabilidad es clave porque nunca queremos cambiar directamente un valor en el árbol de estado, sino que siempre queremos hacer una copia y devolver un valor nuevo basado en el valor anterior.

A continuación, se muestra un ejemplo de cómo eliminar un objeto anidado:

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

Para comprender esto mejor, asegúrese de consultar este artículo: https://medium.com/better-programming/deleting-an-item-in-a-nested-redux-state-3de0cb3943da