كيفية إدارة الحالة العامة في React باستخدام Context و useReducer

import { createContext } from 'react';

// المكوّنات المستهلكة لهذا السياق تُعيد الرسم عند تغيّر الـ state
export const CartStateContext    = createContext(null);

// المكوّنات المستهلكة لهذا السياق لا تُعيد الرسم أبداً بسبب تغيّر الـ state
// (dispatch ثابت — React يضمن أنه لا يتغيير أبداً)
export const CartDispatchContext = createContext(null);

// cart-reducer.js
export const initialState = { items: [], total: 0 };

export function cartReducer(state, action) {
  switch (action.type) {
    case 'ADD_ITEM': {
      const exists = state.items.find(i => i.id === action.item.id);
      const items  = exists
        ? state.items.map(i =>
            i.id === action.item.id
              ? { ...i, qty: i.qty + 1 }
              : i
          )
        : [...state.items, { ...action.item, qty: 1 }];
      return { items, total: items.reduce((s, i) => s + i.price * i.qty, 0) };
    }
    case 'REMOVE_ITEM':
      return {
        ...state,
        items: state.items.filter(i => i.id !== action.id),
        total: state.total - (state.items.find(i => i.id === action.id)?.price ?? 0),
      };
    case 'CLEAR':
      return initialState;
    default:
      return state;
  }
}

import { useReducer } from 'react';
import { CartStateContext, CartDispatchContext } from './cart-context';
import { cartReducer, initialState } from './cart-reducer';

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

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

// main.jsx أو App.jsx
import { CartProvider } from './cart-provider';

function App() {
  return (
    <CartProvider>
      <Header />
      <main>
        <ProductList />
        <CheckoutFlow />
      </main>
    </CartProvider>
  );
}

import { useContext } from 'react';
import { CartStateContext, CartDispatchContext } from './cart-context';

// للقراءة فقط: يُعيد الرسم عند تغيّر state السلة
function CartSummary() {
  const { items, total } = useContext(CartStateContext);
  return (
    <div>
      <span>{items.length} منتج</span>
      <span>${total.toFixed(2)}</span>
    </div>
  );
}

// للكتابة فقط: لا يُعيد الرسم أبداً بسبب تغيّر state السلة
function AddToCartButton({ product }) {
  const dispatch = useContext(CartDispatchContext);
  return (
    <button onClick={() => dispatch({ type: 'ADD_ITEM', item: product })}>
      أضف إلى السلة
    </button>
  );
}

import { useContext } from 'react';
import { CartStateContext, CartDispatchContext } from './cart-context';

export function useCartState() {
  const ctx = useContext(CartStateContext);
  if (ctx === null) throw new Error('useCartState يجب استخدامه داخل <CartProvider>');
  return ctx;
}

export function useCartDispatch() {
  const ctx = useContext(CartDispatchContext);
  if (ctx === null) throw new Error('useCartDispatch يجب استخدامه داخل <CartProvider>');
  return ctx;
}

// الاستخدام في أي مكان في الشجرة:
// const { items } = useCartState();
// const dispatch  = useCartDispatch();