React?? useContext ? useReducer? ??? ?? ?? ??: ??? ?? ?? ??

?? ????? React ???????? ?? ??? ????? ???? ?? useContext? useReducer? ???? ??? ??????. ??? ??? ? ? ??? ???? ?? ??????. ?? ? ?? ? ???? ??? ??? ?? ???? ???? ?? ??? ????? ??? ?????.

? ?????? ??????? ???? ??? ????? ?? ??, ????, ??, ?? ?? ? ?? ??? ??? ???? ??? ????.

? ?? ????? ?? ??? ??? ???.

1. useReducer? ???? ? ??? ??? ?????.
2. ??? ???? ???? ??? ??? ??? ????? ?????.
3. ?? ??? ??? ???? ??? ???? ??? ??? ??? ?????.
4. ???? ??? ????? ? ?? ??? ?? ?? ??? ?????.

????!

---

???? ??: ??? ?? ??

???? ???????? ??? ?????.

• ?? ??: ????? ??? ? ?? ?? ??
• ???? ??: ???? ????? ??? ??, ????, ??? ? ????.
• ???? ??: ? ??? ? ??? ???? ?????.

?? ????? ???? ??? ?? ????? ???? ??? ????????.

?? ? ?? ??

????? React ????? ????? ?? ?? ??? ?????.

src/
├── CartContext.js
├── CartProvider.js
├── ProductList.js
├── Cart.js
└── App.js

1??: ?? ?? ? ??? ??

? ????? ?? ?? ??? ???? ?? ???? ???????.

?? ??:

// Initial state structure
const initialState = {
  products: [
    { id: 1, name: "Product A", price: 30 },
    { id: 2, name: "Product B", price: 20 },
    { id: 3, name: "Product C", price: 50 }
  ],
  cart: [],
  totalItems: 0,
  totalPrice: 0
};

??? ??:

?? ??, ?? ?? ????, ?? ??, ?? ?? ? ??? ??? ???? cartReducer ??? ???????.

src/
├── CartContext.js
├── CartProvider.js
├── ProductList.js
├── Cart.js
└── App.js

??

• ADD_TO_CART: ????? ??? ???? ?? ?? ?? ??? ????.
• REMOVE_FROM_CART: ID? ???? ??? ?????.
• UPDATE_QUANTITY: ????? ?? ??? ??? ???????.
• CALCULATE_TOTALS: ? ?? ?? ???? ? ??? ?????.

---

2??: ???? ? ??? ???

?? ?? ? ???? ??? ????? ???? ?? ????? ???? ???????. ??? ?? ?? ????? ???? ?? ? ??? ???? ? ????.

CartContext.js

// Initial state structure
const initialState = {
  products: [
    { id: 1, name: "Product A", price: 30 },
    { id: 2, name: "Product B", price: 20 },
    { id: 3, name: "Product C", price: 50 }
  ],
  cart: [],
  totalItems: 0,
  totalPrice: 0
};

---

3??: ???? ??

??? ? ???? ??? ?? ?? ?? ?? ? ????? ?? ?? ??? ??? ? ????.

---

ProductList ?? ??

ProductList ?? ??? ?? ??? ?? ??? ???? ???? ????? ??? ??? ? ??? ???.

ProductList.js

function cartReducer(state, action) {
  switch (action.type) {
    case "ADD_TO_CART": {
      const item = state.cart.find(item => item.id === action.payload.id);
      const updatedCart = item
        ? state.cart.map(cartItem =>
            cartItem.id === item.id
              ? { ...cartItem, quantity: cartItem.quantity + 1 }
              : cartItem
          )
        : [...state.cart, { ...action.payload, quantity: 1 }];

      return { ...state, cart: updatedCart };
    }

    case "REMOVE_FROM_CART": {
      const updatedCart = state.cart.filter(item => item.id !== action.payload);
      return { ...state, cart: updatedCart };
    }

    case "UPDATE_QUANTITY": {
      const updatedCart = state.cart.map(item =>
        item.id === action.payload.id
          ? { ...item, quantity: action.payload.quantity }
          : item
      );
      return { ...state, cart: updatedCart };
    }

    case "CALCULATE_TOTALS": {
      const { totalItems, totalPrice } = state.cart.reduce(
        (totals, item) => {
          totals.totalItems += item.quantity;
          totals.totalPrice += item.price * item.quantity;
          return totals;
        },
        { totalItems: 0, totalPrice: 0 }
      );
      return { ...state, totalItems, totalPrice };
    }

    default:
      return state;
  }
}

?? ?? ??

???? ????? ????? ?? ??? ????, ??? ??????, ??? ????, ? ??? ??? ?????.

Cart.js

import React, { createContext, useReducer } from 'react';

export const CartContext = createContext();

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

  return (
    <CartContext.Provider value={{ state, dispatch }}>
      {children}
    </CartContext.Provider>
  );
}

??

• handleRemove: ?????? ??? ?????.
• handleUpdateQuantity: ??? ??? ??? ???????.
• ? ?? ? ??: ???? ????? ?? ??? ??? ?? ???? ?? ??? ??? ?????.

---

4??: ???? ? ??

?? ?? ??? ???? ??? ???? ? ??? ??? CartProvider?? ?? ?? ?????.

App.js

import React, { useContext } from 'react';
import { CartContext } from './CartContext';

function ProductList() {
  const { state, dispatch } = useContext(CartContext);

  const handleAddToCart = (product) => {
    dispatch({ type: "ADD_TO_CART", payload: product });
    dispatch({ type: "CALCULATE_TOTALS" });
  };

  return (
    <div>
      <h2>Products</h2>
      <ul>
        {state.products.map(product => (
          <li key={product.id}>
            {product.name} - ${product.price}
            <button onClick={() => handleAddToCart(product)}>Add to Cart</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default ProductList;

---

?? ???: ?? ? ???

??????? ???? ?? ?? ???? ??????. ??? ? ?? ????.

1. ???? ????: React.memo? ???? ??? ???? ????? ????? ?? ????? ?? ?????.
2. ??? ????: ?? ? ???? ????? ?? ??? ???? ? ?? ?? ?? ????? ???? ?? ????.

?? ? ??

? ?? ?????? useContext ? useReducer? ???? ??? ????? ??????. ?? ??? ??? ????.

1. ??? ?? ??: useReducer? ??? ?? ? ?? ??? ??????.
2. useContext? ??? ?? ??: ?? ?? ?? ???? ??? ???? ? ??? ???.
3. ?? ??? ??: ?????? ??? ??? ???? ? ???? ???? ??? ?????.

? ?? ??? ????? ??? ?? ??????? ???? ??? ??? ????? ?????. ??? ?????! ?

? ??? React?? useContext ? useReducer? ??? ?? ??: ??? ?? ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!