[react]reactを使用してkao図書検索サイトを作成します:2.カート機能の実装

カートのステータスの管理

カートを追加するaddToOrder()関数

useCallbackを使用してaddToOrder()関数を作成し、カートに本を追加します.
どの本をショッピングバスケットに入れてisbnパラメータを通じて入れます.
パラメータはKaKao図書検索APIで表示できます.
同じ本を追加する場合は、finedで本がショッピングバスケットにあるかどうかをチェックして、2冊または3冊に変更してください.同じ本がある場合は、数量(巻数)に1を加え、ない場合は数量に1を加えてください.

const [orders, setOrders] = useState([]);

// 장바구니 추가
// [{isbn, quantity : 1}]
const addToOrder = useCallback((isbn) => {
  setOrders((orders) => {
    // 동일한 책을 추가할 땐 2권, 3권 으로 변경해주기 위해 동일한 isbn가 있는지 검사
    const finded = orders.find((order) => order.isbn === isbn);
    // 장바구니에 동일한 책이 없으면 quantity에 1을 넣어줌
    if (finded === undefined) {
      return [...orders, { isbn, quantity: 1 }];
    } // 동일한 책이 있으면
    else {
      return orders.map((order) => {
        if (order.isbn === isbn) {
          return {
            isbn,
            quantity: order.quantity + 1,
          };
        } else {
          return order;
        }
      });
    }
  });
}, []);

受注解除用remove()関数

useCallbackで注文をキャンセルすることもできます.

// 장바구니에서 책 삭제하기
const remove = useCallback((isbn) => {
  setOrders((orders) => {
    return orders.filter((order) => order.isbn !== isbn);
  });
}, []);

removeAll()関数は、受注全体をキャンセルします。

注文全体をキャンセルするremoveAll()関数は、useCallbackを介して空の配列に置き換えられます.

// 장바구니에서 전체 책 삭제하기
  const removeAll = useCallback(() => {
    setOrders([]);
}, []);

AppStateProviderコンポーネントをグローバルに管理

上に作成した関数をvalueに入れます.

return (
    <AppStateContext.Provider
      value={{
        books,
        searchBook,
        orders,
        addToOrder,
        remove,
        removeAll,
      }}>
      {children}
    </AppStateContext.Provider>
  );

AppStateProviderコンポーネントをアプリケーションの親コンポーネントにカプセル化し、valueをグローバルに管理します.

function App() {
  return (
    <>
      <AppStateProvider>
        <BrowserRouter>
          <Switch>
            <Route component={MainPage} exact path='/' />
            <Route compoennt={LibraryPage} path='/library' />
          </Switch>
        </BrowserRouter>
      </AppStateProvider>
    </>
  );
}

フックの作成

АААААBooks HookАА

import { useContext } from 'react';
import AppStateContext from '../contexts/AppStateContext';

// books 데이터를 받아서 내주는 역할을 하는 Hook
export default function useBooks() {
  const { books, searchBook } = useContext(AppStateContext);
  return { books, searchBook };
}

✔addToOrder()、remove()およびremoveAll()ステータスは、送信するユーザーBook Hookとして

import { useContext } from 'react';
import AppStateContext from '../contexts/AppStateContext';

// 상태를 받아서 보내주는 역할을 하는 useBooks Hook
export default function useActions() {
  const { addToOrder, remove, removeAll } = useContext(AppStateContext);

  return { addToOrder, remove, removeAll };
}

✔orders Hookデータを受信して提供するuserOrders

import { useContext } from 'react';
import AppStateContext from '../contexts/AppStateContext';

// orders 데이터를 받아서 내주는 역할을 하는 Hook
export default function useOrders() {
  const { orders } = useContext(AppStateContext);
  return orders;
}