Pengurusan Negeri Lanjutan dengan useContext dan useReducer in React: Membina Troli Beli-belah Global

Dalam artikel sebelumnya, kami memperkenalkan konsep menggabungkan useContext dan useReducer untuk mengurus keadaan global dengan berkesan dalam aplikasi React. Kami menunjukkan ini dengan membina senarai tugasan yang mudah. Sekarang, kami akan mengambil perkara yang lebih baik dan menggunakan konsep ini pada contoh dunia sebenar yang lebih kompleks—troli beli-belah global.

Panduan ini akan merangkumi cara mengurus berbilang keadaan dan tindakan, seperti menambah, mengemas kini dan mengalih keluar item serta mengira jumlah—semuanya sambil memastikan aplikasi berskala dan berprestasi.

Dalam bahagian kedua ini, anda akan belajar untuk:

1. Kendalikan keadaan yang lebih kompleks menggunakan useReducer.
2. Buat penyedia konteks yang fleksibel untuk mengurus keadaan dan tindakan secara global.
3. Laksanakan fungsi pengurang lanjutan untuk melaksanakan pengiraan dan mengendalikan pelbagai jenis tindakan.
4. Optimumkan prestasi komponen dengan memoisasi untuk prestasi yang lebih baik.

Jom selami!

Gambaran Keseluruhan Projek: Troli Beli-belah Global

Aplikasi troli beli-belah kami akan mempunyai:

• Senarai Produk: Satu set item tersedia untuk ditambahkan pada troli.
• Fungsi Troli: Pengguna boleh menambah, mengemas kini dan mengalih keluar item dalam troli.
• Jumlah Troli: Kira dan paparkan jumlah item dan jumlah harga.

Kami akan mulakan dengan menyediakan konteks dan pengurang, kemudian membina komponen untuk mempamerkan ciri.

Persediaan dan Fail Permulaan

Untuk bermula, mulakan projek React anda dan sediakan struktur folder asas:

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

Langkah 1: Buat Keadaan Awal dan Pengurangan

Kita akan mulakan dengan keadaan awal yang mewakili troli kosong dan set sampel produk.

Keadaan Awal:

// 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
};

Fungsi Pengurang:

Kami akan menyediakan fungsi cartReducer untuk mengendalikan pelbagai tindakan seperti menambah item, mengemas kini kuantiti item, mengalih keluar item dan mengira jumlah.

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

Penjelasan

• ADD_TO_CART: Menambahkan item pada troli, meningkatkan kuantiti jika ia sudah wujud.
• REMOVE_FROM_CART: Mengalih keluar item berdasarkan IDnya.
• KUANTITI_KEMASKINI: Mengemas kini kuantiti item dalam troli.
• KIRA_JUMLAH: Mengira jumlah bilangan item dan jumlah harga troli.

Langkah 2: Cipta Konteks dan Pembekal

Sekarang, kami akan mencipta konteks dan penyedia untuk melepasi keadaan dan fungsi penghantaran kami secara global. Ini akan membenarkan semua komponen mengakses keadaan troli dan tindakan.

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
};

Langkah 3: Membina Komponen

Dengan penyediaan dan konteks disediakan, kami kini boleh mencipta komponen untuk Senarai Produk dan Troli.

Komponen Senarai Produk

Komponen ProductList akan memaparkan senarai produk yang tersedia dan membenarkan pengguna menambah produk pada troli.

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;
  }
}

Komponen Troli

Komponen Troli memaparkan item dalam troli, membenarkan mengemas kini kuantiti, mengalih keluar item dan menunjukkan jumlah item dan harga.

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>
  );
}

Penjelasan

• handleRemove: Mengalih keluar item daripada troli.
• handleUpdateQuantity: Mengemas kini kuantiti item yang dipilih.
• Jumlah Item dan Harga: Komponen troli memaparkan jumlah item dan harga berdasarkan nilai yang dikira dalam negeri.

Langkah 4: Balut Apl dengan Pembekal

Untuk memastikan semua komponen boleh mengakses keadaan troli, bungkus keseluruhan apl dalam 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;

Sentuhan Akhir: Memoisasi dan Pengoptimuman

Apabila aplikasi anda berkembang, pengoptimuman prestasi adalah penting. Berikut adalah beberapa petua:

1. Komponen Memoize: Gunakan React.memo untuk mengelakkan pemaparan semula komponen yang tidak perlu yang bergantung pada keadaan.
2. Konteks Asingkan: Pertimbangkan untuk mengasingkan konteks produk dan troli jika ia menjadi terlalu besar, membenarkan lebih banyak kemas kini keadaan disasarkan.

Rekap dan Kesimpulan

Dalam panduan lanjutan ini, kami menggunakan useContext dan useReducer untuk mengurus troli beli-belah global. Makanan utama termasuk:

1. Pengurusan Negeri yang Kompleks: useReducer memudahkan pengurusan tindakan dan pengiraan yang rumit.
2. Keadaan Global dengan useContext: Menjadikan keadaan boleh diakses merentas pepohon komponen.
3. Corak Boleh Skala: Mengasingkan keadaan dan tindakan dalam konteks membolehkan kod yang lebih bersih dan modular.

Cuba gunakan pendekatan ini pada projek anda dan lihat cara pendekatan ini meningkatkan kebolehskalaan dan prestasi aplikasi anda. Selamat mengekod! ?

Atas ialah kandungan terperinci Pengurusan Negeri dengan useContext dan useReducer in React: Membina Troli Beli-belah Global. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!