M

MLOG

العربية

تعمق في خطاف useReducer من React لإدارة حالات التطبيق المعقدة بفعالية، مما يعزز الأداء وقابلية الصيانة لمشاريع React العالمية.

نمط useReducer في React: إتقان إدارة الحالة المعقدة

في المشهد المتطور باستمرار لتطوير الواجهات الأمامية، رسخت React مكانتها كإطار عمل رائد لبناء واجهات المستخدم. مع نمو التطبيقات في التعقيد، تصبح إدارة الحالة تحديًا متزايدًا. يوفر خطاف useState طريقة بسيطة لإدارة الحالة داخل المكون، ولكن للسيناريوهات الأكثر تعقيدًا، تقدم React بديلاً قويًا: خطاف useReducer. تتعمق هذه التدوينة في نمط useReducer، وتستكشف فوائده، وتطبيقاته العملية، وكيف يمكنه تحسين تطبيقات React الخاصة بك بشكل كبير على مستوى العالم.

فهم الحاجة إلى إدارة الحالة المعقدة

عند بناء تطبيقات React، غالبًا ما نواجه مواقف لا تكون فيها حالة المكون مجرد قيمة بسيطة، بل مجموعة من نقاط البيانات المترابطة أو حالة تعتمد على قيم الحالة السابقة. خذ بعين الاعتبار هذه الأمثلة:

في هذه السيناريوهات، يمكن أن يؤدي استخدام useState وحده إلى كود معقد وصعب الإدارة. قد يصبح من المرهق تحديث متغيرات حالة متعددة استجابة لحدث واحد، ويمكن أن يصبح منطق إدارة هذه التحديثات متناثرًا في جميع أنحاء المكون، مما يجعل من الصعب فهمه وصيانته. وهنا يتألق useReducer.

تقديم خطاف useReducer

خطاف useReducer هو بديل لـ useState لإدارة منطق الحالة المعقد. يعتمد على مبادئ نمط Redux، ولكنه يُنفذ داخل مكون React نفسه، مما يلغي الحاجة إلى مكتبة خارجية منفصلة في كثير من الحالات. يسمح لك بمركزية منطق تحديث حالتك في دالة واحدة تسمى reducer.

يأخذ خطاف useReducer وسيطتين:

يعيد الخطاف مصفوفة تحتوي على عنصرين:

دالة الـ Reducer

دالة الـ reducer هي قلب نمط useReducer. إنها دالة نقية، مما يعني أنه لا ينبغي أن يكون لها أي آثار جانبية (مثل إجراء استدعاءات API أو تعديل المتغيرات العامة) ويجب أن تعيد دائمًا نفس الناتج لنفس المدخلات. تأخذ دالة الـ reducer وسيطتين:

داخل دالة الـ reducer، تستخدم عبارة switch أو عبارات if/else if للتعامل مع أنواع الإجراءات المختلفة وتحديث الحالة وفقًا لذلك. هذا يمركز منطق تحديث حالتك ويجعل من السهل التفكير في كيفية تغير الحالة استجابة للأحداث المختلفة.

دالة الـ Dispatch

دالة الـ dispatch هي الطريقة التي تستخدمها لتشغيل تحديثات الحالة. عندما تستدعي dispatch(action)، يتم تمرير الإجراء إلى دالة الـ reducer، والتي تقوم بعد ذلك بتحديث الحالة بناءً على نوع الإجراء والحمولة (payload).

مثال عملي: تنفيذ عداد

لنبدأ بمثال بسيط: مكون عداد. يوضح هذا المفاهيم الأساسية قبل الانتقال إلى أمثلة أكثر تعقيدًا. سننشئ عدادًا يمكنه الزيادة والنقصان وإعادة التعيين:


import React, { useReducer } from 'react';

// تحديد أنواع الإجراءات
const INCREMENT = 'INCREMENT';
const DECREMENT = 'DECREMENT';
const RESET = 'RESET';

// تحديد دالة الـ reducer
function counterReducer(state, action) {
  switch (action.type) {
    case INCREMENT:
      return { count: state.count + 1 };
    case DECREMENT:
      return { count: state.count - 1 };
    case RESET:
      return { count: 0 };
    default:
      return state;
  }
}

function Counter() {
  // تهيئة useReducer
  const [state, dispatch] = useReducer(counterReducer, { count: 0 });

  return (
    <div>
      <p>العدد: {state.count}</p>
      <button onClick={() => dispatch({ type: INCREMENT })}>زيادة</button>
      <button onClick={() => dispatch({ type: DECREMENT })}>إنقاص</button>
      <button onClick={() => dispatch({ type: RESET })}>إعادة تعيين</button>
    </div>
  );
}

export default Counter;

في هذا المثال:

التوسع في مثال العداد: إضافة الحمولة (Payload)

دعنا نعدل العداد للسماح بالزيادة بقيمة محددة. هذا يقدم مفهوم الحمولة (payload) في الإجراء:


import React, { useReducer } from 'react';

const INCREMENT = 'INCREMENT';
const DECREMENT = 'DECREMENT';
const RESET = 'RESET';
const SET_VALUE = 'SET_VALUE';

function counterReducer(state, action) {
  switch (action.type) {
    case INCREMENT:
      return { count: state.count + action.payload };
    case DECREMENT:
      return { count: state.count - action.payload };
    case RESET:
      return { count: 0 };
    case SET_VALUE:
      return { count: action.payload };
    default:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(counterReducer, { count: 0 });
  const [inputValue, setInputValue] = React.useState(1);

  return (
    <div>
      <p>العدد: {state.count}</p>
      <button onClick={() => dispatch({ type: INCREMENT, payload: parseInt(inputValue) || 1 })}>زيادة بمقدار {inputValue}</button>
      <button onClick={() => dispatch({ type: DECREMENT, payload: parseInt(inputValue) || 1 })}>إنقاص بمقدار {inputValue}</button>
      <button onClick={() => dispatch({ type: RESET })}>إعادة تعيين</button>
       <input
         type="number"
         value={inputValue}
         onChange={(e) => setInputValue(e.target.value)}
       />
      </div>
  );
}

export default Counter;

في هذا المثال الموسع:

فوائد استخدام useReducer

يقدم نمط useReducer العديد من المزايا على استخدام useState مباشرة لإدارة الحالة المعقدة:

متى تستخدم useReducer

بينما يقدم useReducer فوائد كبيرة، فإنه ليس دائمًا الخيار الصحيح. فكر في استخدام useReducer عندما:

بالنسبة لتحديثات الحالة البسيطة، غالبًا ما يكون useState كافيًا وأبسط في الاستخدام. ضع في اعتبارك مدى تعقيد حالتك وإمكانية النمو عند اتخاذ القرار.

المفاهيم والتقنيات المتقدمة

الجمع بين useReducer و Context

لإدارة الحالة العامة أو مشاركة الحالة عبر مكونات متعددة، يمكنك الجمع بين useReducer وواجهة برمجة تطبيقات Context في React. غالبًا ما يُفضل هذا النهج على Redux للمشاريع الصغيرة والمتوسطة الحجم حيث لا ترغب في إدخال تبعيات إضافية.


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

// تحديد أنواع الإجراءات والـ reducer (كما كان من قبل)
const INCREMENT = 'INCREMENT';
// ... (أنواع الإجراءات الأخرى ودالة counterReducer)

const CounterContext = createContext();

function CounterProvider({ children }) {
  const [state, dispatch] = useReducer(counterReducer, { count: 0 });

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

function useCounter() {
  return useContext(CounterContext);
}

function Counter() {
  const { state, dispatch } = useCounter();

  return (
    <div>
      <p>العدد: {state.count}</p>
      <button onClick={() => dispatch({ type: INCREMENT })}>زيادة</button>
    </div>
  );
}

function App() {
  return (
    <CounterProvider>
      <Counter />
    </CounterProvider>
  );
}

export default App;

في هذا المثال:

اختبار useReducer

اختبار الـ reducers أمر مباشر لأنها دوال نقية. يمكنك بسهولة اختبار دالة الـ reducer بمعزل عن غيرها باستخدام إطار عمل اختبار الوحدات مثل Jest أو Mocha. إليك مثال باستخدام Jest:


import { counterReducer } from './counterReducer'; // بافتراض أن counterReducer موجود في ملف منفصل

const INCREMENT = 'INCREMENT';

describe('counterReducer', () => {
  it('should increment the count', () => {
    const state = { count: 0 };
    const action = { type: INCREMENT };
    const newState = counterReducer(state, action);
    expect(newState.count).toBe(1);
  });

   it('should return the same state for unknown action types', () => {
        const state = { count: 10 };
        const action = { type: 'UNKNOWN_ACTION' };
        const newState = counterReducer(state, action);
        expect(newState).toBe(state); // التأكد من أن الحالة لم تتغير
    });
});

يضمن اختبار الـ reducers الخاصة بك أنها تتصرف كما هو متوقع ويسهل إعادة هيكلة منطق حالتك. هذه خطوة حاسمة في بناء تطبيقات قوية وقابلة للصيانة.

تحسين الأداء باستخدام الحفظ المؤقت (Memoization)

عند العمل مع حالات معقدة وتحديثات متكررة، فكر في استخدام useMemo لتحسين أداء مكوناتك، خاصة إذا كان لديك قيم مشتقة محسوبة بناءً على الحالة. على سبيل المثال:


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

function reducer(state, action) {
  // ... (منطق الـ reducer) 
}

function MyComponent() {
  const [state, dispatch] = useReducer(reducer, initialState);

  // حساب قيمة مشتقة، مع حفظها مؤقتًا باستخدام useMemo
  const derivedValue = useMemo(() => {
    // عملية حسابية مكلفة بناءً على الحالة
    return state.value1 + state.value2;
  }, [state.value1, state.value2]); // التبعيات: يتم إعادة الحساب فقط عند تغير هذه القيم

  return (
    <div>
      <p>القيمة المشتقة: {derivedValue}</p>
      <button onClick={() => dispatch({ type: 'UPDATE_VALUE1', payload: 10 })}>تحديث القيمة 1</button>
      <button onClick={() => dispatch({ type: 'UPDATE_VALUE2', payload: 20 })}>تحديث القيمة 2</button>
    </div>
  );
}

في هذا المثال، يتم حساب derivedValue فقط عندما يتغير state.value1 أو state.value2، مما يمنع الحسابات غير الضرورية عند كل إعادة عرض. هذا النهج ممارسة شائعة لضمان أداء عرض مثالي.

أمثلة من الواقع وحالات استخدام

دعنا نستكشف بعض الأمثلة العملية حيث يكون useReducer أداة قيمة في بناء تطبيقات React لجمهور عالمي. لاحظ أن هذه الأمثلة مبسطة لتوضيح المفاهيم الأساسية. قد تتضمن التطبيقات الفعلية منطقًا وتبعية أكثر تعقيدًا.

1. فلاتر منتجات التجارة الإلكترونية

تخيل موقعًا للتجارة الإلكترونية (فكر في منصات شهيرة مثل أمازون أو AliExpress، المتاحة عالميًا) مع كتالوج منتجات كبير. يحتاج المستخدمون إلى تصفية المنتجات حسب معايير مختلفة (نطاق السعر، العلامة التجارية، الحجم، اللون، بلد المنشأ، إلخ). يعتبر useReducer مثاليًا لإدارة حالة الفلتر.


import React, { useReducer } from 'react';

const initialState = {
  priceRange: { min: 0, max: 1000 },
  brand: [], // مصفوفة من العلامات التجارية المحددة
  color: [], // مصفوفة من الألوان المحددة
  //... معايير تصفية أخرى
};

function filterReducer(state, action) {
  switch (action.type) {
    case 'UPDATE_PRICE_RANGE':
      return { ...state, priceRange: action.payload };
    case 'TOGGLE_BRAND':
      const brand = action.payload;
      return { ...state, brand: state.brand.includes(brand) ? state.brand.filter(b => b !== brand) : [...state.brand, brand] };
    case 'TOGGLE_COLOR':
      // منطق مشابه لفلترة الألوان
      return { ...state, color: state.color.includes(action.payload) ? state.color.filter(c => c !== action.payload) : [...state.color, action.payload] };
    // ... إجراءات تصفية أخرى
    default:
      return state;
  }
}

function ProductFilter() {
  const [state, dispatch] = useReducer(filterReducer, initialState);

  // مكونات واجهة المستخدم لتحديد معايير الفلتر وتشغيل إجراءات dispatch
  // على سبيل المثال: إدخال نطاق للسعر، مربعات اختيار للعلامات التجارية، إلخ.

  return (
    <div>
      <!-- عناصر واجهة المستخدم للفلتر -->
    </div>
  );
}

يوضح هذا المثال كيفية التعامل مع معايير تصفية متعددة بطريقة محكومة. عندما يقوم المستخدم بتعديل أي إعداد فلتر (السعر، العلامة التجارية، إلخ)، يقوم الـ reducer بتحديث حالة الفلتر وفقًا لذلك. ثم يستخدم المكون المسؤول عن عرض المنتجات الحالة المحدثة لتصفية المنتجات المعروضة. يدعم هذا النمط بناء أنظمة تصفية معقدة شائعة في منصات التجارة الإلكترونية العالمية.

2. نماذج متعددة الخطوات (مثل نماذج الشحن الدولي)

تتضمن العديد من التطبيقات نماذج متعددة الخطوات، مثل تلك المستخدمة للشحن الدولي أو إنشاء حسابات مستخدمين بمتطلبات معقدة. يتفوق useReducer في إدارة حالة مثل هذه النماذج.


import React, { useReducer } from 'react';

const initialState = {
  step: 1, // الخطوة الحالية في النموذج
  formData: {
    firstName: '',
    lastName: '',
    address: '',
    city: '',
    country: '',
    // ... حقول نموذج أخرى
  },
  errors: {},
};

function formReducer(state, action) {
  switch (action.type) {
    case 'NEXT_STEP':
      return { ...state, step: state.step + 1 };
    case 'PREV_STEP':
      return { ...state, step: state.step - 1 };
    case 'UPDATE_FIELD':
      return { ...state, formData: { ...state.formData, [action.payload.field]: action.payload.value } };
    case 'SET_ERRORS':
      return { ...state, errors: action.payload };
    case 'SUBMIT_FORM':
      // التعامل مع منطق إرسال النموذج هنا، على سبيل المثال، استدعاءات API
      return state;
    default:
      return state;
  }
}

function MultiStepForm() {
  const [state, dispatch] = useReducer(formReducer, initialState);

  // منطق العرض لكل خطوة من النموذج
  // بناءً على الخطوة الحالية في الحالة
  const renderStep = () => {
    switch (state.step) {
      case 1:
        return <Step1 formData={state.formData} dispatch={dispatch} />;
      case 2:
        return <Step2 formData={state.formData} dispatch={dispatch} />;
      // ... خطوات أخرى
      default:
        return <p>خطوة غير صالحة</p>;
    }
  };

  return (
    <div>
      {renderStep()}
      <!-- أزرار التنقل (التالي، السابق، إرسال) بناءً على الخطوة الحالية -->
    </div>
  );
}

يوضح هذا كيفية إدارة حقول النموذج والخطوات والأخطاء المحتملة للتحقق من الصحة بطريقة منظمة وقابلة للصيانة. إنه أمر بالغ الأهمية لبناء عمليات تسجيل أو دفع سهلة الاستخدام، خاصة للمستخدمين الدوليين الذين قد تكون لديهم توقعات مختلفة بناءً على عاداتهم المحلية وخبرتهم مع منصات مختلفة مثل Facebook أو WeChat.

3. تطبيقات الوقت الفعلي (الدردشة، أدوات التعاون)

يعتبر useReducer مفيدًا للتطبيقات في الوقت الفعلي، مثل أدوات التعاون مثل Google Docs أو تطبيقات المراسلة. يتعامل مع الأحداث مثل تلقي الرسائل، انضمام/مغادرة المستخدم، وحالة الاتصال، مما يضمن تحديث واجهة المستخدم حسب الحاجة.


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

const initialState = {
  messages: [],
  users: [],
  connectionStatus: 'connecting',
};

function chatReducer(state, action) {
  switch (action.type) {
    case 'RECEIVE_MESSAGE':
      return { ...state, messages: [...state.messages, action.payload] };
    case 'USER_JOINED':
      return { ...state, users: [...state.users, action.payload] };
    case 'USER_LEFT':
      return { ...state, users: state.users.filter(user => user.id !== action.payload.id) };
    case 'SET_CONNECTION_STATUS':
      return { ...state, connectionStatus: action.payload };
    default:
      return state;
  }
}

function ChatRoom() {
  const [state, dispatch] = useReducer(chatReducer, initialState);

  useEffect(() => {
    // إنشاء اتصال WebSocket (مثال):
    const socket = new WebSocket('wss://your-websocket-server.com');

    socket.onopen = () => dispatch({ type: 'SET_CONNECTION_STATUS', payload: 'connected' });
    socket.onmessage = (event) => dispatch({ type: 'RECEIVE_MESSAGE', payload: JSON.parse(event.data) });
    socket.onclose = () => dispatch({ type: 'SET_CONNECTION_STATUS', payload: 'disconnected' });

    return () => socket.close(); // التنظيف عند إلغاء تحميل المكون
  }, []);

  // عرض الرسائل وقائمة المستخدمين وحالة الاتصال بناءً على الحالة
  return (
    <div>
      <p>حالة الاتصال: {state.connectionStatus}</p>
      <!-- واجهة المستخدم لعرض الرسائل وقائمة المستخدمين وإرسال الرسائل -->
    </div>
  );
}

يقدم هذا المثال الأساس لإدارة دردشة في الوقت الفعلي. تتعامل الحالة مع تخزين الرسائل والمستخدمين الموجودين حاليًا في الدردشة وحالة الاتصال. خطاف useEffect مسؤول عن إنشاء اتصال WebSocket ومعالجة الرسائل الواردة. يخلق هذا النهج واجهة مستخدم سريعة الاستجابة وديناميكية تلبي احتياجات المستخدمين في جميع أنحاء العالم.

أفضل الممارسات لاستخدام useReducer

للاستخدام الفعال لـ useReducer وإنشاء تطبيقات قابلة للصيانة، ضع في اعتبارك هذه الممارسات الأفضل:

الخلاصة

يعد خطاف useReducer أداة قوية ومتعددة الاستخدامات لإدارة الحالة المعقدة في تطبيقات React. يقدم العديد من الفوائد، بما في ذلك مركزية منطق الحالة، وتحسين تنظيم الكود، وتعزيز قابلية الاختبار. من خلال اتباع أفضل الممارسات وفهم مفاهيمه الأساسية، يمكنك الاستفادة من useReducer لبناء تطبيقات React أكثر قوة وقابلية للصيانة وأداءً. يمكّنك هذا النمط من مواجهة تحديات إدارة الحالة المعقدة بفعالية، مما يسمح لك ببناء تطبيقات جاهزة للعالمية توفر تجارب مستخدم سلسة في جميع أنحاء العالم.

بينما تتعمق أكثر في تطوير React، فإن دمج نمط useReducer في مجموعة أدواتك سيؤدي بلا شك إلى قواعد كود أنظف وأكثر قابلية للتطوير وسهولة في الصيانة. تذكر دائمًا أن تضع في اعتبارك الاحتياجات المحددة لتطبيقك واختيار أفضل نهج لإدارة الحالة لكل موقف. برمجة سعيدة!