نحوه ایجاد یک سبد خرید در Next.js با Context و useReducer

کارکرد سبد خریدی را که می‌توانید خودتان بسازید کاوش کنید و در طول مسیر با React آشنا شوید.

سبد خرید جزء ضروری هر سایت تجارت الکترونیکی است. این به مشتریان امکان ذخیره و خرید محصولات را می دهد.

در یک برنامه تجارت الکترونیک Next.js، می توانید از Context API و قلاب useReducer برای ایجاد یک سبد خرید استفاده کنید. Context API اشتراک‌گذاری داده‌های سبد خرید را بین مؤلفه‌ها ساده می‌کند در حالی که useReducer وضعیت سبد خرید را کنترل می‌کند.

ایجاد صفحه محصول

در پوشه pages یک فایل جدید به نام Product.jsx ایجاد کنید که یک محصول واحد را رندر می کند.

export default function Product({id, name, price}) {
  return (
    <div>
      <p>{name}</p>
      <p>{price}</p>
      <button>Add to Cart</button>
    </div>
  )
}

جزء محصول شناسه، نام و قیمت یک محصول را می پذیرد و آن را نمایش می دهد. همچنین دارای دکمه “افزودن به سبد خرید” است.

هنگامی که محصولی از قبل به سبد خرید اضافه شده است، دکمه باید به دکمه “حذف از سبد خرید” تغییر کند و اگر محصولی در سبد خرید نیست، صفحه باید دکمه “افزودن به سبد خرید” را نمایش دهد.

برای اجرای این قابلیت، باید موارد موجود در سبد خرید را با استفاده از Context API و قلاب useReducer پیگیری کنید.

ایجاد یک سبد خرید با استفاده از Context API

Context API به شما امکان می دهد داده ها را در اجزای مختلف بدون نیاز به انتقال دستی از والدین به فرزند، به اشتراک بگذارید. این اجزا می تواند نوار پیمایش، صفحه جزئیات محصول یا صفحه پرداخت باشد.

یک فایل جدید به نام cartContext.js در پوشه ای به نام context ایجاد کنید و زمینه را ایجاد کنید.

import { createContext } from "react";

export const CartContext = createContext({
    items: [],
});

CartContext آرایه ای از آیتم ها را به عنوان مقدار پیش فرض می گیرد.

بعد، ارائه دهنده زمینه را ایجاد کنید. ارائه‌دهنده زمینه به اجزایی که زمینه را مصرف می‌کنند اجازه می‌دهد تا در تغییرات زمینه مشترک شوند.

در یک تابع جدید به نام cartProvider، موارد زیر را اضافه کنید:

export const CartProvider = ({ children }) => {
  return <CartContext.Provider>{children}</CartContext.Provider>;
};

برای پیگیری اقلام موجود در سبد خرید، از قلاب useReducer استفاده خواهید کرد.

قلاب useReducer مانند قلاب useState عمل می‌کند، با این تفاوت که به مدیریت منطق پیچیده‌تر حالت کمک می‌کند. تابع کاهنده و حالت اولیه را می پذیرد. وضعیت فعلی و یک تابع اعزام را برمی گرداند که یک عمل را به تابع کاهنده منتقل می کند.

یک تابع جدید به نام CartReducer ایجاد کنید و کاهنده را اضافه کنید.

const cartReducer = (state, action) => {
  const { type, payload } = action;

  switch (type) {
    case "ADD":
      return {
        ...state,
        items: payload.items,
      };

    case "REMOVE":
      return {
        ...state,
        items: payload.items,
      };

    default:
      throw new Error("No case for that type");
  }
};

تابع کاهنده شامل یک دستور سوئیچ است که بسته به نوع عمل وضعیت را به روز می کند. عملکرد کاهنده سبد خرید دارای عملکردهای “ADD” و “REMOVE” است که به ترتیب به سبد خرید اضافه و از سبد خرید حذف می شوند.

پس از ایجاد تابع کاهنده، از آن در قلاب useReducer استفاده کنید. با ایجاد تابع CartProvider شروع کنید. این تابعی است که زمینه را برای اجزای دیگر فراهم می کند.

export const CartProvider = ({children}) => {
  return <CartContext.Provider>{children}</CartContext.Provider>;
}

سپس، قلاب useReducer را ایجاد کنید.

export const CartProvider = ({ children }) => {
  const [state, dispatch] = useReducer(cartReducer, { items: [] });
  return <CartContext.Provider>{children}</CartContext.Provider>;
};

تابع اعزام مسئول به‌روزرسانی وضعیت سبد خرید است، بنابراین عملکرد CartProvider را طوری تغییر دهید که شامل توابعی باشد که هنگام به‌روزرسانی سبد خرید، محصولات را به قلاب useReducer ارسال می‌کند.

import { createContext, useReducer } from "react";

export const CartProvider = ({ children }) => {
  const [state, dispatch] = useReducer(cartReducer, initialState);

  const addToCart = (product) => {
    const updatedCart = [...state.items, product];

    dispatch({
      type: "ADD",
      payload: {
        items: updatedCart,
      },
    });
  };

  const removeFromCart = (id) => {
    const updatedCart = state.items.filter(
      (currentProduct) => currentProduct.id !== id
    );

    dispatch({
      type: "REMOVE",
      payload: {
        items: updatedCart,
      },
    });
  };

  return <CartContext.Provider>{children}</CartContext.Provider>;
};

تابع addToCart محصول جدید را به محصولات موجود اضافه می کند و محصولات به روز شده را در شیء payload تابع dispatch برمی گرداند. به همین ترتیب، تابع removeFromCart مورد را با شناسه فیلتر می کند و لیست به روز شده را برمی گرداند.

همچنین باید ارزش prop را در ارائه دهنده CartContext برگردانید.

export const CartProvider = ({ children }) => {
  const [state, dispatch] = useReducer(cartReducer, {
    items: [],
  });

  const addToCart = (product) => {};
  const removeFromCart = (id) => {};

  const value = {
    items: state.items,
    addToCart,
    removeFromCart,
  };

  return <CartContext.Provider value={value}>{children}</CartContext.Provider>;
}

ارزش پایه از طریق قلاب useContext مصرف می شود.

مصرف زمینه سبد خرید

تاکنون زمینه سبد خرید را ایجاد کرده اید و یک تابع useReducer ایجاد کرده اید که سبد خرید را به روز می کند. در مرحله بعد، با استفاده از قلاب useContext، زمینه سبد خرید را در جزء محصول مصرف خواهید کرد.

با قرار دادن index.js، مؤلفه برتر، با ارائه‌دهنده زمینه شروع کنید تا مقادیر زمینه در کل برنامه در دسترس قرار گیرد.

import { CartProvider } from "../context/cartContext";

function MyApp({ Component, pageProps }) {
  return (
    <CartProvider>
      <Component {...pageProps} />
    </CartProvider>
  );
}

export default MyApp;

سپس قلاب useContext و ارائه‌دهنده زمینه سبد خرید را در Product.js وارد کنید

import { useContext } from "react"
import { CartContext } from "../context/cartContext"

export default function Product() {
  const {items, addToCart, removeFromCart} = useContext(CartContext)

  return (
    <>
      <div>
        <p>{name}</p>
        <p>{price}</p>
        <button>Add to Cart</button>
      </div>
    </>
  )
}

عملکرد دکمه بستگی به این دارد که آیا کالا از قبل در سبد خرید است یا خیر. اگر کالایی در سبد خرید وجود دارد، دکمه باید آن را از سبد خرید حذف کند و اگر کالایی از قبل در سبد خرید نیست، باید آن را اضافه کند. این بدان معنی است که شما باید وضعیت مورد را با استفاده از useEffect و useState پیگیری کنید. کد useEffect بررسی می کند که آیا آیتم پس از رندر شدن کامپوننت در سبد خرید موجود است یا خیر، در حالی که useState وضعیت مورد را به روز می کند.

const [exists, setExists] = useState(false);

useEffect(() => {
  const inCart = items.find((item) => item.id === id);

  if (inCart) {
      setExists(true);
  } else {
      setExists(false);
  } 
}, [items, id]);

اکنون از رندر شرطی برای نمایش دکمه بر اساس وضعیت موجود استفاده کنید.

return (
  <div>
    <p>{name}</p>
    <p>{price}</p>
    {
     exists
     ? <button onClick={() => removeFromCart(id)}>Remove from Cart</button>
     : <button onClick={() => addToCart({id, name, price})}>Add to Cart</button>
   }
  </div>
)

توجه داشته باشید که توابع کنترل کننده onClick توابع removeFromCart و addToCart هستند که در ارائه دهنده زمینه تعریف شده اند.

افزودن قابلیت های بیشتر به سبد خرید

شما یاد گرفته اید که چگونه با استفاده از Context API و useReducer یک سبد خرید ایجاد کنید.

اگرچه این راهنما فقط قابلیت افزودن و حذف را پوشش می‌دهد، می‌توانید از همان مفاهیم برای افزودن ویژگی‌های بیشتری مانند تنظیم تعداد اقلام سبد خرید استفاده کنید. نکته مهم، درک API زمینه و نحوه استفاده از هوک ها برای به روز رسانی جزئیات سبد خرید است.

منبع مقاله