Reduxを活用したEコマースアプリのカート機能実装方法を徹底解説

Eコマースアプリでのカート機能は、ユーザーが購入したい商品を一時的に保存し、購入手続きをスムーズに行うために欠かせない要素です。この機能を効率的に管理するためには、アプリケーションの状態を一元化できるツールが必要です。そこで登場するのが、Reactアプリケーションで広く利用されている状態管理ライブラリ「Redux」です。本記事では、Reduxを活用してEコマースアプリのカート機能を実装する手順を、わかりやすく解説していきます。カートの基本的な仕組みから、拡張機能の実装、テストとデバッグまで、幅広くカバーします。これにより、実務で役立つスキルを習得できるでしょう。

Reduxの基本概念とカート機能の概要
1. Reduxとは何か
2. カート機能におけるReduxの役割
アプリケーションのセットアップ
Reduxストアの設定
アクションとリデューサーの設計
カートのUIコンポーネントの構築
Redux Thunkを活用した非同期処理
バックエンド連携とカート機能のデータ保存
機能の拡張: クーポンコードや数量変更機能
テストとデバッグの手法
まとめ

Reduxの基本概念とカート機能の概要

Reduxとは何か

Reduxは、JavaScriptアプリケーションの状態管理を簡潔かつ予測可能にするためのライブラリです。Reactと組み合わせて使われることが多く、アプリケーション全体の状態を「ストア」に保存し、それを「アクション」と「リデューサー」で操作します。

Reduxの主要な要素

ストア（Store）: アプリケーションのすべての状態を保持するオブジェクトです。
アクション（Action）: 状態を変更するためにストアに送信される情報を定義します。
リデューサー（Reducer）: 状態の変更を行う純粋関数です。

カート機能におけるReduxの役割

カート機能は、アプリケーションの中で動的に変化する情報（商品リスト、数量、合計金額など）を効率的に管理する必要があります。Reduxを使うことで、次のようなメリットがあります：

状態の一元管理: 商品追加や削除などの操作が複数のコンポーネントにまたがる場合でも、一元化された状態管理が可能です。
予測可能なデータフロー: アクションを通じて状態を変更するため、データフローが明確になります。
スケーラビリティ: 状態管理の仕組みが統一されているため、機能拡張が容易です。

カート機能の仕組み

商品をカートに追加: ユーザーが「追加」ボタンをクリックすると、該当商品の情報をReduxストアに保存します。
数量の変更や削除: ストアの状態を更新するアクションを利用して、数量の変更や商品の削除を行います。
合計金額の計算: カートに保存された商品の情報を元に、動的に合計金額を算出します。

Reduxの基本を理解し、カート機能に適用することで、アプリケーションの可読性とメンテナンス性が大幅に向上します。

アプリケーションのセットアップ

プロジェクトの作成

まずは、ReactとReduxを使ったプロジェクトを作成します。以下の手順で進めてください：

Reactアプリの作成:
ターミナルで次のコマンドを実行し、Reactプロジェクトを作成します。

   npx create-react-app redux-cart-app
   cd redux-cart-app

Reduxと関連ライブラリのインストール:
Reduxを使用するために必要なパッケージをインストールします。

   npm install @reduxjs/toolkit react-redux

ディレクトリ構成

プロジェクトが複雑化しないように、適切なディレクトリ構成を設定します。以下は推奨される構成例です：

src/
├── components/   # UIコンポーネント
├── features/     # Reduxの状態管理関連
│   └── cart/     # カート機能
├── pages/        # ページコンポーネント
├── App.js        # メインアプリケーション
├── index.js      # エントリーポイント
└── store.js      # Reduxストアの設定

基本ファイルの準備

Reduxストアの作成準備:
src/store.jsを作成し、Reduxストアを初期化します。

   import { configureStore } from '@reduxjs/toolkit';

   export const store = configureStore({
       reducer: {}, // 後でリデューサーを追加
   });

Reactアプリへのプロバイダー設定:
index.jsでProviderを使用してReduxストアをReactに接続します。

   import React from 'react';
   import ReactDOM from 'react-dom';
   import { Provider } from 'react-redux';
   import { store } from './store';
   import App from './App';

   ReactDOM.render(
       <Provider store={store}>
           <App />
       </Provider>,
       document.getElementById('root')
   );

基本動作の確認

以上の設定で、ReactアプリケーションとReduxの接続が完了しました。この段階でアプリはReduxストアを使用する準備が整っています。次のステップでは、カート機能のための状態管理を具体的に実装していきます。

Reduxストアの設定

カート機能のための状態管理

カート機能では、商品リストや数量、合計金額といった状態を管理します。これらの状態を保持するために、Reduxストアにリデューサーを設定します。

リデューサーの作成

カート用Sliceの作成
Redux ToolkitのcreateSliceを使って、カート機能のリデューサーを作成します。
src/features/cart/cartSlice.jsを作成し、以下の内容を記述します：

   import { createSlice } from '@reduxjs/toolkit';

   const initialState = {
       items: [], // カート内の商品リスト
       totalAmount: 0, // 合計金額
   };

   const cartSlice = createSlice({
       name: 'cart',
       initialState,
       reducers: {
           addItem(state, action) {
               const newItem = action.payload;
               const existingItem = state.items.find(item => item.id === newItem.id);

               if (existingItem) {
                   existingItem.quantity += newItem.quantity;
                   existingItem.totalPrice += newItem.price * newItem.quantity;
               } else {
                   state.items.push({
                       id: newItem.id,
                       name: newItem.name,
                       price: newItem.price,
                       quantity: newItem.quantity,
                       totalPrice: newItem.price * newItem.quantity,
                   });
               }

               state.totalAmount += newItem.price * newItem.quantity;
           },
           removeItem(state, action) {
               const id = action.payload;
               const existingItem = state.items.find(item => item.id === id);

               if (existingItem) {
                   state.totalAmount -= existingItem.totalPrice;
                   state.items = state.items.filter(item => item.id !== id);
               }
           },
       },
   });

   export const { addItem, removeItem } = cartSlice.actions;
   export default cartSlice.reducer;

ストアにリデューサーを追加

src/store.jsにカート用リデューサーを登録します：

import { configureStore } from '@reduxjs/toolkit';
import cartReducer from './features/cart/cartSlice';

export const store = configureStore({
    reducer: {
        cart: cartReducer,
    },
});

基本動作の確認

Redux DevToolsを使用して、カートに商品を追加・削除した際の状態変化を確認できます。次のステップでは、これをUIと接続し、実際のアプリケーションで動作させます。

アクションとリデューサーの設計

アクションの詳細

Reduxでのアクションは、状態を変更するための明確な意図を定義します。カート機能では、以下のアクションを用意します：

addItem: 商品をカートに追加します。
removeItem: 商品をカートから削除します。
updateItemQuantity: 商品の数量を更新します。

リデューサーの設計

各アクションに対するリデューサーを詳細に設計します。リデューサーはアクションのペイロードを受け取り、状態を適切に更新します。

商品追加（addItem）

addItemアクションのリデューサーは、カートに新しい商品を追加するか、既存の商品数量を増加させます。

addItem(state, action) {
    const newItem = action.payload;
    const existingItem = state.items.find(item => item.id === newItem.id);

    if (existingItem) {
        existingItem.quantity += newItem.quantity;
        existingItem.totalPrice += newItem.price * newItem.quantity;
    } else {
        state.items.push({
            id: newItem.id,
            name: newItem.name,
            price: newItem.price,
            quantity: newItem.quantity,
            totalPrice: newItem.price * newItem.quantity,
        });
    }

    state.totalAmount += newItem.price * newItem.quantity;
}

商品削除（removeItem）

removeItemアクションのリデューサーは、カートから該当商品を削除します：

removeItem(state, action) {
    const id = action.payload;
    const existingItem = state.items.find(item => item.id === id);

    if (existingItem) {
        state.totalAmount -= existingItem.totalPrice;
        state.items = state.items.filter(item => item.id !== id);
    }
}

数量変更（updateItemQuantity）

数量変更のリデューサーを追加し、商品の数量を直接変更します：

updateItemQuantity(state, action) {
    const { id, quantity } = action.payload;
    const existingItem = state.items.find(item => item.id === id);

    if (existingItem) {
        state.totalAmount -= existingItem.totalPrice;
        existingItem.quantity = quantity;
        existingItem.totalPrice = existingItem.price * quantity;
        state.totalAmount += existingItem.totalPrice;
    }
}

アクションのエクスポート

cartSlice.jsでアクションをエクスポートします：

export const { addItem, removeItem, updateItemQuantity } = cartSlice.actions;

アクションとリデューサーのテスト

Redux DevToolsで、アクションの発火後に状態が正しく更新されているかを確認してください。これで、カート機能のアクションとリデューサーが完成しました。次は、これをReactコンポーネントと接続します。

カートのUIコンポーネントの構築

UI設計とReduxの接続

カート機能をReactコンポーネントとして構築し、Reduxと接続して状態管理を行います。以下は、カートの基本的なUIとその機能の実装手順です。

カートコンポーネントの作成

ファイルの準備
src/components/Cart.jsを作成します。
Reduxの状態とアクションを使用
React ReduxのuseSelectorとuseDispatchを利用して、Reduxストアの状態を取得し、アクションを発火します。

基本的なCartコンポーネント

以下は、カートアイテムの一覧を表示する基本的なコンポーネントの例です：

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { removeItem, updateItemQuantity } from '../features/cart/cartSlice';

const Cart = () => {
    const cartItems = useSelector(state => state.cart.items);
    const totalAmount = useSelector(state => state.cart.totalAmount);
    const dispatch = useDispatch();

    const handleRemove = (id) => {
        dispatch(removeItem(id));
    };

    const handleQuantityChange = (id, quantity) => {
        if (quantity >= 1) {
            dispatch(updateItemQuantity({ id, quantity }));
        }
    };

    return (
        <div>
            <h2>ショッピングカート</h2>
            {cartItems.length === 0 ? (
                <p>カートは空です</p>
            ) : (
                <div>
                    {cartItems.map(item => (
                        <div key={item.id} style={{ marginBottom: '20px' }}>
                            <h4>{item.name}</h4>
                            <p>価格: ${item.price}</p>
                            <p>数量: 
                                <input
                                    type="number"
                                    value={item.quantity}
                                    onChange={(e) => handleQuantityChange(item.id, Number(e.target.value))}
                                />
                            </p>
                            <p>合計: ${item.totalPrice}</p>
                            <button onClick={() => handleRemove(item.id)}>削除</button>
                        </div>
                    ))}
                    <h3>合計金額: ${totalAmount}</h3>
                </div>
            )}
        </div>
    );
};

export default Cart;

コンポーネントのスタイルと拡張

UIをさらに魅力的にするため、CSSやUIフレームワーク（例: Tailwind CSS, Material-UI）を適用することを検討してください。上記のコードをベースに、以下のような拡張を行うことができます：

レスポンシブデザイン: モバイルとデスクトップで最適化されたレイアウトを提供します。
商品画像の表示: 各商品の画像を追加します。
「購入を確定」ボタンの実装: ユーザーが次の購入ステップに進むためのボタンを配置します。

Reduxのデータ取得確認

カートコンポーネントをアプリのメイン画面に配置し、状態が正しく取得・更新されることを確認してください。これでカート機能の基本的なUIが完成しました。次は、非同期処理によるデータの取得を実装します。

Redux Thunkを活用した非同期処理

非同期処理の重要性

Eコマースアプリのカート機能では、以下のような非同期操作が必要になる場合があります：

サーバーからカートの初期データを取得する。
カートの変更内容（商品の追加や削除）をサーバーに送信する。
在庫状況や価格情報をリアルタイムで更新する。

Redux Thunkは、非同期処理を実現するためのReduxミドルウェアです。本セクションでは、カートデータをサーバーから取得する機能を実装します。

Redux Thunkの設定

Redux Thunkの有効化
Redux Toolkitでは、configureStoreでThunkがデフォルトで有効になっています。そのため、追加の設定は不要です。
非同期アクションの実装
createAsyncThunkを使い、非同期アクションを簡潔に記述できます。

カートデータの取得機能

API関数の作成
サーバーと通信するための関数を定義します。src/api/cartAPI.jsを作成します：

   export const fetchCartData = async () => {
       const response = await fetch('https://api.example.com/cart');
       if (!response.ok) {
           throw new Error('Failed to fetch cart data');
       }
       return response.json();
   };

非同期Thunkの作成
src/features/cart/cartSlice.jsで、非同期アクションを作成します：

   import { createAsyncThunk } from '@reduxjs/toolkit';
   import { fetchCartData } from '../../api/cartAPI';

   export const loadCartData = createAsyncThunk(
       'cart/loadCartData',
       async (_, thunkAPI) => {
           try {
               const data = await fetchCartData();
               return data;
           } catch (error) {
               return thunkAPI.rejectWithValue(error.message);
           }
       }
   );

リデューサーで状態を管理
Thunkの状態（pending, fulfilled, rejected）を処理するため、extraReducersを設定します：

   const cartSlice = createSlice({
       name: 'cart',
       initialState: {
           items: [],
           totalAmount: 0,
           status: 'idle', // 'idle' | 'loading' | 'succeeded' | 'failed'
           error: null,
       },
       reducers: {
           // 既存のリデューサー
       },
       extraReducers: (builder) => {
           builder
               .addCase(loadCartData.pending, (state) => {
                   state.status = 'loading';
                   state.error = null;
               })
               .addCase(loadCartData.fulfilled, (state, action) => {
                   state.status = 'succeeded';
                   state.items = action.payload.items;
                   state.totalAmount = action.payload.totalAmount;
               })
               .addCase(loadCartData.rejected, (state, action) => {
                   state.status = 'failed';
                   state.error = action.payload;
               });
       },
   });

非同期データの表示

カートコンポーネントでデータのロード状態を表示します：

import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { loadCartData } from '../features/cart/cartSlice';

const Cart = () => {
    const dispatch = useDispatch();
    const { items, totalAmount, status, error } = useSelector(state => state.cart);

    useEffect(() => {
        if (status === 'idle') {
            dispatch(loadCartData());
        }
    }, [status, dispatch]);

    if (status === 'loading') {
        return <p>データを読み込んでいます...</p>;
    }

    if (status === 'failed') {
        return <p>エラーが発生しました: {error}</p>;
    }

    return (
        <div>
            <h2>ショッピングカート</h2>
            {items.length === 0 ? (
                <p>カートは空です</p>
            ) : (
                <div>
                    {items.map(item => (
                        <div key={item.id}>
                            <h4>{item.name}</h4>
                            <p>価格: ${item.price}</p>
                            <p>数量: {item.quantity}</p>
                            <p>合計: ${item.totalPrice}</p>
                        </div>
                    ))}
                    <h3>合計金額: ${totalAmount}</h3>
                </div>
            )}
        </div>
    );
};

export default Cart;

動作確認

アプリケーションを起動して、カートのデータがロードされることを確認します。
状態がloadingからsucceededに変わり、カートの内容が正しく表示されるかテストします。

非同期処理の実装により、サーバーとの連携が可能になりました。次は、データ保存とバックエンド連携について解説します。

バックエンド連携とカート機能のデータ保存

バックエンド連携の必要性

カート機能をサーバーと連携させることで、次のような利点があります：

データの永続化: ユーザーが再ログインしてもカートデータが保持されます。
リアルタイム同期: 他のデバイスとカート内容を同期できます。
セキュリティ強化: データをサーバー側で管理することで、不正操作を防ぎます。

このセクションでは、カートデータをサーバーに保存する機能を実装します。

API関数の作成

サーバーにデータを送信するAPI関数を定義します。src/api/cartAPI.jsに次の内容を追加します：

export const saveCartData = async (cartData) => {
    const response = await fetch('https://api.example.com/cart', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(cartData),
    });

    if (!response.ok) {
        throw new Error('Failed to save cart data');
    }

    return response.json();
};

Redux Thunkで非同期保存を実装

カートデータをサーバーに保存するThunkを作成します：

import { createAsyncThunk } from '@reduxjs/toolkit';
import { saveCartData } from '../../api/cartAPI';

export const saveCart = createAsyncThunk(
    'cart/saveCart',
    async (_, { getState, rejectWithValue }) => {
        const state = getState();
        const cartData = {
            items: state.cart.items,
            totalAmount: state.cart.totalAmount,
        };

        try {
            const response = await saveCartData(cartData);
            return response;
        } catch (error) {
            return rejectWithValue(error.message);
        }
    }
);

リデューサーの更新

保存操作の状態を管理するため、extraReducersに以下を追加します：

extraReducers: (builder) => {
    builder
        .addCase(saveCart.pending, (state) => {
            state.status = 'saving';
        })
        .addCase(saveCart.fulfilled, (state) => {
            state.status = 'saved';
        })
        .addCase(saveCart.rejected, (state, action) => {
            state.status = 'save_failed';
            state.error = action.payload;
        });
};

保存操作の実行

カート変更時に保存操作をトリガーします。カートのUIコンポーネントを以下のように更新します：

const handleSaveCart = () => {
    dispatch(saveCart());
};

// UI内のボタンで保存をトリガー
<button onClick={handleSaveCart}>カートを保存</button>

保存処理の確認

カートに商品を追加・削除後、「カートを保存」ボタンをクリックします。
サーバーがリクエストを正常に処理し、データが保存されたことを確認します。
保存成功時、Reduxの状態がsavedになることをRedux DevToolsで確認します。

エラーハンドリングの実装

エラー発生時、UIにエラーメッセージを表示します：

if (status === 'save_failed') {
    return <p>カートの保存中にエラーが発生しました: {error}</p>;
}

応用: 自動保存機能

一定時間ごとにカートを自動保存する機能を実装することも可能です。これには、setIntervalを利用して定期的にsaveCartをディスパッチします。

動作確認

サーバーとの連携により、カートデータが永続化されるようになりました。これにより、ユーザー体験が向上し、データの安全性も確保されます。次は、機能拡張について解説します。

機能の拡張: クーポンコードや数量変更機能

クーポンコードの適用機能

クーポンコードを利用することで、ユーザーに割引を提供できます。この機能を実装する手順を解説します。

Reduxで割引の状態管理

初期状態の追加
割引額を管理するため、カートの初期状態にdiscountを追加します：

   const initialState = {
       items: [],
       totalAmount: 0,
       discount: 0, // 割引額
   };

アクションの追加
割引を適用するアクションを作成します：

   applyCoupon(state, action) {
       const { code } = action.payload;
       if (code === 'DISCOUNT10') {
           state.discount = state.totalAmount * 0.1; // 10%割引
       } else {
           state.discount = 0;
       }
   }

UIコンポーネントでの連携
クーポンコード入力フォームを作成し、アクションをディスパッチします：

   const handleApplyCoupon = () => {
       dispatch(applyCoupon({ code: couponCode }));
   };

   return (
       <div>
           <input
               type="text"
               placeholder="クーポンコードを入力"
               value={couponCode}
               onChange={(e) => setCouponCode(e.target.value)}
           />
           <button onClick={handleApplyCoupon}>適用</button>
           <p>割引額: ${discount}</p>
           <p>最終合計: ${totalAmount - discount}</p>
       </div>
   );

数量変更機能の改善

現在の数量変更

既に実装している数量変更機能に改良を加え、以下の機能を実現します：

在庫数のチェック
ユーザーが入力した数量が在庫数を超えないように制限します。
マイナス値の防止
数量が0未満にならないように制御します。

リデューサーでの改善

数量変更時に条件を追加します：

updateItemQuantity(state, action) {
    const { id, quantity, stock } = action.payload;
    const existingItem = state.items.find(item => item.id === id);

    if (existingItem) {
        const newQuantity = Math.min(quantity, stock);
        existingItem.quantity = newQuantity > 0 ? newQuantity : 1;
        existingItem.totalPrice = existingItem.price * existingItem.quantity;

        state.totalAmount = state.items.reduce((total, item) => total + item.totalPrice, 0);
    }
}

UIでの数量変更

数量変更時に在庫数を考慮するようにUIを更新します：

const handleQuantityChange = (id, quantity, stock) => {
    if (quantity >= 1) {
        dispatch(updateItemQuantity({ id, quantity, stock }));
    }
};

合計金額の計算と表示

割引適用後の最終金額を動的に表示します：

<p>合計金額: ${totalAmount}</p>
<p>割引後の金額: ${totalAmount - discount}</p>

機能テストとデバッグ

クーポンコード適用時に割引額が正しく計算されるか確認します。
数量変更時、在庫数や0未満の値が適切に制御されるかテストします。

応用機能の提案

複数のクーポンコードの対応: 種類ごとに異なる割引率を適用する機能を追加します。
自動更新: カート内容が変更された際に、合計金額と割引が即時反映されるようにします。

機能の拡張により、カートの利便性とユーザー体験が向上します。次は、テストとデバッグ方法を解説します。

テストとデバッグの手法

カート機能のテストの重要性

カート機能はEコマースアプリの中核であり、バグや不具合が発生するとユーザー体験や売上に悪影響を及ぼします。そのため、慎重にテストとデバッグを行い、信頼性を確保する必要があります。

ユニットテスト

Reduxのリデューサーやアクションのロジックをテストします。

リデューサーのテスト
Jestを使ってリデューサーの動作を確認します：

   import cartReducer, { addItem, removeItem } from './cartSlice';

   describe('cartReducer', () => {
       it('should handle addItem', () => {
           const initialState = { items: [], totalAmount: 0 };
           const newItem = { id: 1, name: '商品A', price: 100, quantity: 2 };

           const nextState = cartReducer(initialState, addItem(newItem));
           expect(nextState.items).toHaveLength(1);
           expect(nextState.totalAmount).toBe(200);
       });

       it('should handle removeItem', () => {
           const initialState = { items: [{ id: 1, name: '商品A', price: 100, quantity: 2, totalPrice: 200 }], totalAmount: 200 };

           const nextState = cartReducer(initialState, removeItem(1));
           expect(nextState.items).toHaveLength(0);
           expect(nextState.totalAmount).toBe(0);
       });
   });

非同期アクションのテスト
Redux ToolkitのcreateAsyncThunkをテストします：

   import { loadCartData } from './cartSlice';
   import { fetchCartData } from '../../api/cartAPI';

   jest.mock('../../api/cartAPI');

   it('should fetch cart data successfully', async () => {
       fetchCartData.mockResolvedValueOnce({ items: [], totalAmount: 0 });
       const dispatch = jest.fn();
       const getState = jest.fn();

       await loadCartData()(dispatch, getState);

       expect(dispatch).toHaveBeenCalledWith(expect.objectContaining({ type: 'cart/loadCartData/pending' }));
       expect(dispatch).toHaveBeenCalledWith(expect.objectContaining({ type: 'cart/loadCartData/fulfilled' }));
   });

統合テスト

React Testing Libraryを使用して、カートコンポーネント全体の挙動をテストします：

import { render, screen, fireEvent } from '@testing-library/react';
import { Provider } from 'react-redux';
import { store } from '../../store';
import Cart from './Cart';

test('displays cart items and total amount', () => {
    render(
        <Provider store={store}>
            <Cart />
        </Provider>
    );

    expect(screen.getByText('ショッピングカート')).toBeInTheDocument();
    expect(screen.getByText('カートは空です')).toBeInTheDocument();
});

デバッグ手法

Redux DevTools
アクションと状態の変更をリアルタイムで確認できます。バグの発生時に過去の状態に戻して原因を特定します。
コンソールログ
非同期処理やエラー時にconsole.logで詳細情報を記録します：

   console.log('Fetch cart data error:', error.message);

エラーハンドリング
ユーザーがエラーに対して適切なフィードバックを受け取れるよう、UIでエラーメッセージを表示します。

継続的なテストの重要性

カート機能の改修や新機能の追加後も、自動化されたテストを実行することで、既存の機能が正常に動作することを確認できます。

これで、カート機能のテストとデバッグが完了しました。最後に、今回の内容をまとめます。

まとめ

本記事では、Reduxを活用したEコマースアプリのカート機能実装方法を徹底解説しました。Reduxの基本概念から始め、状態管理、非同期処理、バックエンド連携、そしてクーポンコードや数量変更などの機能拡張まで、実践的な手順を詳しく説明しました。また、ユニットテストや統合テストを通じて、カート機能の信頼性を確保する方法も紹介しました。

Reduxを適切に活用することで、カート機能のスケーラビリティとメンテナンス性が大幅に向上します。この知識を活かして、さらに高度な機能を実装し、ユーザー体験を向上させるアプリケーション開発に挑戦してください。

Reduxを活用したEコマースアプリのカート機能実装方法を徹底解説

Reduxの基本概念とカート機能の概要

Reduxとは何か

Reduxの主要な要素

カート機能におけるReduxの役割

カート機能の仕組み

アプリケーションのセットアップ

プロジェクトの作成

ディレクトリ構成

基本ファイルの準備

基本動作の確認

Reduxストアの設定

カート機能のための状態管理

リデューサーの作成

ストアにリデューサーを追加

基本動作の確認

アクションとリデューサーの設計

アクションの詳細

リデューサーの設計

商品追加（addItem）

商品削除（removeItem）

数量変更（updateItemQuantity）

アクションのエクスポート

アクションとリデューサーのテスト

カートのUIコンポーネントの構築

UI設計とReduxの接続

カートコンポーネントの作成

基本的なCartコンポーネント

コンポーネントのスタイルと拡張

Reduxのデータ取得確認

Redux Thunkを活用した非同期処理

非同期処理の重要性

Redux Thunkの設定

カートデータの取得機能

非同期データの表示

動作確認

バックエンド連携とカート機能のデータ保存

バックエンド連携の必要性

API関数の作成

Redux Thunkで非同期保存を実装

リデューサーの更新

保存操作の実行

保存処理の確認

エラーハンドリングの実装

応用: 自動保存機能

動作確認

機能の拡張: クーポンコードや数量変更機能

クーポンコードの適用機能

Reduxで割引の状態管理

数量変更機能の改善

現在の数量変更

リデューサーでの改善

UIでの数量変更

合計金額の計算と表示

機能テストとデバッグ

応用機能の提案

テストとデバッグの手法

カート機能のテストの重要性

ユニットテスト

統合テスト

デバッグ手法

継続的なテストの重要性

まとめ

コメント

コメントする コメントをキャンセル

コメントするコメントをキャンセル