これは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() 
})

しかし、これは入力状態オブジェクトを変更しています-新しいオブジェクトを返しているにもかかわらず、これは禁止されていますか？

いいえ。状態を変更しないでください。

新しいオブジェクトを返す場合でも、古いオブジェクトを汚染しているため、それを実行する必要はありません。これにより、古い状態と新しい状態を比較するときに問題が発生します。たとえば、shouldComponentUpdatereact-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」レデューサーのもう1つのバリエーション：

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