Est-ce la bonne façon de supprimer un élément à l'aide de redux?

Je sais que je ne suis pas censé muter l'entrée et que je devrais cloner l'objet pour le muter. Je suivais la convention utilisée sur un projet de démarrage redux qui utilisait:

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

pour ajouter un élément - je reçois l'utilisation de spread pour ajouter l'élément dans le tableau.

pour supprimer j'ai utilisé:

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

mais cela mute l'objet d'état d'entrée - est-ce interdit même si je retourne un nouvel objet?

Non, ne changez jamais votre état.

Même si vous renvoyez un nouvel objet, vous polluez toujours l'ancien, ce que vous ne voulez jamais faire. Cela rend problématique lors des comparaisons entre l'ancien et le nouvel état. Par exemple dans shouldComponentUpdatelequel react-redux utilise sous le capot. Cela rend également impossible le voyage dans le temps (c'est-à-dire annuler et refaire).

Utilisez plutôt des méthodes immuables. Utilisez toujours Array#sliceet jamais Array#splice.

Je suppose que de votre code action.payloadest l'index de l'élément en cours de suppression. Une meilleure façon serait la suivante:

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

Vous pouvez utiliser la méthode de filtre de tableau pour supprimer un élément spécifique d'un tableau sans modifier l'état d'origine.

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

Dans le contexte de votre code, cela ressemblerait à ceci:

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

La Array.prototype.filterméthode ES6 renvoie un nouveau tableau avec les éléments qui correspondent aux critères. Par conséquent, dans le contexte de la question initiale, ce serait:

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

Une autre variante du réducteur immuable "DELETED" pour le tableau avec des objets:

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

La règle d'or est que nous ne retournons pas un état muté, mais plutôt un nouvel état. Selon le type de votre action, vous devrez peut-être mettre à jour votre arborescence d'états sous diverses formes lorsqu'elle atteint le réducteur.

Dans ce scénario, nous essayons de supprimer un élément d'une propriété d'état.

Cela nous amène au concept des modèles de mise à jour immuable (ou de modification de données) de Redux. L'immuabilité est essentielle car nous ne voulons jamais changer directement une valeur dans l'arborescence d'état, mais plutôt toujours faire une copie et renvoyer une nouvelle valeur basée sur l'ancienne valeur.

Voici un exemple de suppression d'un objet imbriqué:

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

Pour mieux comprendre cela, assurez-vous de consulter cet article: https://medium.com/better-programming/deleting-an-item-in-a-nested-redux-state-3de0cb3943da