Reduxでのアイテム削除
2024-10-23
Reduxを使ったアイテムの削除の正しい方法について (日本語)
Reduxは、JavaScriptアプリケーションの状態管理のためのプレディクテブルステートコンテナーライブラリです。アイテムを削除する際の正しい手順は以下のようになります。
アクションの作成:
- アクションクリエイター
アイテムを削除するためのアクションを生成する関数です。
// actions/index.js
export const deleteItem = (itemId) => ({
type: 'DELETE_ITEM',
payload: itemId,
});
リデューサーの更新:
- フィルター
削除したいアイテムを除外して新しい状態を作成します。 - スイッチステートメント
アクションタイプに基づいて、状態を更新します。 - リデューサー
アプリケーションの状態を更新する関数です。
// reducers/items.js
const initialState = [
// 初期状態のアイテム配列
];
export default function itemsReducer(state = initialState, action) {
switch (action.type) {
case 'DELETE_ITEM':
return state.filter((item) => item.id !== action.payload);
default:
return state;
}
}
コンポーネントでのアクションのディスパッチ:
- useDispatchフック
Reduxストアにアクションをディスパッチするためのフックです。 - コンポーネント
アイテムを削除するボタンやリンクなどの要素が含まれます。
// components/ItemList.js
import { useDispatch } from 'react-redux';
import { deleteItem } from '../actions';
const ItemList = () => {
const dispatch = useDispatch();
const handleDelete = (itemId) => {
dispatch(deleteItem(itemId));
};
// アイテムのリストをレンダリングし、削除ボタンにハンドラーをアタッチする
};
Reduxストアでの状態の更新:
- リデューサーの呼び出し
アクションがディスパッチされると、リデューサーが呼び出され、状態が更新されます。 - Reduxストア
アプリケーション全体の状態を管理します。
重要なポイント:
- テスト
リデューサーやコンポーネントのテストを徹底的に行います。 - セレクト関数
複雑な状態の取り出しにはセレクト関数を使用します。 - イミュータビリティ
Reduxでは、状態を直接変更することは避けて、新しい状態を返すようにします。
Reduxでのアイテム削除の例 (日本語)
アクションクリエイター (actions/index.js)
export const deleteItem = (itemId) => ({
type: 'DELETE_ITEM',
payload: itemId,
});
- deleteItem関数
アイテムのIDを受け取り、DELETE_ITEMというアクションタイプとペイロードとしてアイテムのIDを含むアクションオブジェクトを返します。
リデューサー (reducers/items.js)
const initialState = [
// 初期状態のアイテム配列
];
export default function itemsReducer(state = initialState, action) {
switch (action.type) {
case 'DELETE_ITEM':
return state.filter((item) => item.id !== action.payload);
default:
return state;
}
}
- DELETE_ITEMの場合
filterメソッドを使用して、削除したいアイテムを除外した新しい配列を返します。 - itemsReducer関数
初期状態としてアイテムの配列を受け取ります。
コンポーネント (components/ItemList.js)
import { useDispatch } from 'react-redux';
import { deleteItem } from '../actions';
const ItemList = () => {
const dispatch = useDispatch();
const handleDelete = (itemId) => {
dispatch(deleteItem(itemId));
};
// アイテムのリストをレンダリングし、削除ボタンにハンドラーをアタッチする
};
- レンダリング
アイテムのリストをレンダリングし、各アイテムの削除ボタンにhandleDelete関数をアタッチします。 - handleDelete関数
アイテムのIDを受け取り、deleteItemアクションをディスパッチします。 - ItemListコンポーネント
useDispatchフックを使用してReduxストアにアクションをディスパッチします。
これらのコードの動作:
- ユーザーが削除ボタンをクリック
handleDelete関数が呼び出され、アイテムのIDがdeleteItemアクションに渡されます。 - アクションのディスパッチ
useDispatchフックがdeleteItemアクションをReduxストアにディスパッチします。 - リデューサーの呼び出し
ReduxストアがitemsReducerを呼び出し、アクションタイプとペイロードを受け取ります。 - 状態の更新
itemsReducerがfilterメソッドを使用して、削除したいアイテムを除外した新しい配列を返します。 - コンポーネントの再レンダリング
Reduxストアの状態が更新されたため、ItemListコンポーネントが再レンダリングされ、更新されたアイテムリストが表示されます。
Thunk Middleware:
- Promise
非同期処理の結果をPromiseとして返します。 - 非同期操作
アイテムの削除が非同期操作である場合、Thunk Middlewareを使用して、アクションクリエイターから非同期処理を直接実行できます。
import { createAsyncThunk } from '@reduxjs/toolkit';
export const deleteItemAsync = createAsyncThunk(
'items/deleteItem',
async (itemId) => {
// 非同期処理 (API呼び出しなど)
const response = await fetch(`/api/items/${itemId}`, { method: 'DELETE' });
const data = await response.json();
return data;
}
);
Redux Toolkit:
- caseReducer
アクションタイプに基づいて状態を更新する関数です。
import { createSlice } from '@reduxjs/toolkit';
const itemsSlice = createSlice({
name: 'items',
initialState: [],
reducers: {
deleteItem: (state, action) => {
return state.filter((item) => item.id !== action.payload);
},
},
});
export const { deleteItem } = itemsSlice.actions;
export default itemsSlice.reducer;
Immer:
- イミュータビリティの簡素化
Immerを使用して、状態を直接変更し、自動的に新しい状態が生成されるようにします。
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import produce from 'immer';
const itemsSlice = createSlice({
name: 'items',
initialState: [],
reducers: {
deleteItem: (state, action: PayloadAction<number>) =>
produce(state, (draft) => {
draft.splice(draft.findIndex((item) => item.id === action.payload), 1);
}),
},
});
Custom Middleware:
- 特定のロジック
特定のロジックを実装するために、カスタムミドルウェアを作成することもできます。
javascript reactjs redux
