1. مقدمة إلى المنطق غير المتزامن في مجموعة أدوات Redux

غالبًا ما تتضمن معالجة المنطق غير المتزامن في Redux الكثير من التعليمات البرمجية المعيارية، مثل إنشاء أنواع الإجراءات ومنشئي الإجراءات ومخفضات الحركة للتعامل مع الحالات المختلفة (التحميل والنجاح والخطأ). تعمل Redux Toolkit على تبسيط ذلك من خلال createAsyncThunk، الذي يسمح لك بتعريف "thunk" للعمليات غير المتزامنة بأقل قدر من الإعداد.

إنشاء AsyncThunk:

• يُنشئ تلقائيًا أنواع الإجراءات المعلقة والمستوفاة والمرفوضة.
• يسهل التعامل مع الآثار الجانبية مثل طلبات واجهة برمجة التطبيقات.
• يتكامل بسلاسة مع الشرائح التي تم إنشاؤها باستخدام createSlice.

2. استخدام createAsyncThunk لاستدعاءات واجهة برمجة التطبيقات

دعونا نتعرف على كيفية إنشاء مجموعة غير متزامنة لجلب البيانات من واجهة برمجة التطبيقات العامة وإدارة حالات التحميل المختلفة.

الخطوة 1: إعداد خدمة API بسيطة
سنستخدم واجهة برمجة تطبيقات عامة مجانية لتوضيح هذا المثال. لنفترض أن لدينا نقطة نهاية واجهة برمجة التطبيقات (API) التي تُرجع قائمة المنشورات.

الخطوة 2: إنشاء Thunk غير متزامن
أولاً، قم بإنشاء ملف شريحة جديد باسم postSlice.js داخل دليل الميزات/المشاركات. سنستخدم createAsyncThunk لجلب المشاركات بشكل غير متزامن.

// src/features/posts/postsSlice.js
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

// Async thunk to fetch posts from an API
export const fetchPosts = createAsyncThunk('posts/fetchPosts', async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  const data = await response.json();
  return data; // This will be the 'fulfilled' action payload
});

const postsSlice = createSlice({
  name: 'posts',
  initialState: {
    posts: [],
    status: 'idle', // idle | loading | succeeded | failed
    error: null,
  },
  reducers: {
    // Optional: add reducers for synchronous actions
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchPosts.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchPosts.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.posts = action.payload;
      })
      .addCase(fetchPosts.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.error.message;
      });
  },
});

export default postsSlice.reducer;

توضيح:

createAsyncThunk: تأخذ هذه الوظيفة وسيطتين: نوع إجراء السلسلة ووظيفة غير متزامنة. وظيفة المزامنة هي المكان الذي يحدث فيه استدعاء API. عندما يتم حل الوعد، يتم إرجاع البيانات وإرسالها تلقائيًا كحمولة الإجراء المنجزة.

extraReducers: يُستخدم للتعامل مع الإجراءات التي تم إنشاؤها بواسطة createAsyncThunk. نحن ندير ثلاث حالات: معلقة، مستوفاة، ومرفوضة.

3. دمج Thunks في المكونات

الآن، دعونا نستخدم fetchPosts thunk في مكون React ونعرض البيانات.

الخطوة 1: إنشاء مكون قائمة المشاركات
قم بإنشاء مكون PostsList.js في دليل الميزات/المشاركات:

// src/features/posts/PostsList.js
import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchPosts } from './postsSlice';

const PostsList = () => {
  const dispatch = useDispatch();
  const posts = useSelector((state) => state.posts.posts);
  const status = useSelector((state) => state.posts.status);
  const error = useSelector((state) => state.posts.error);

  useEffect(() => {
    if (status === 'idle') {
      dispatch(fetchPosts());
    }
  }, [status, dispatch]);

  let content;

  if (status === 'loading') {
    content = 
Loading...
;
  } else if (status === 'succeeded') {
    content = (
      

{posts.map((post) => (
• {post.title}
))}

{error}

توضيح:

يرسل خطاف useEffect fetchPosts عند تثبيت المكون، ولكن فقط إذا كانت الحالة الحالية "خاملة".
يتم التحقق من الحالة لتحديد المحتوى الذي سيتم عرضه (أداة التحميل الدوارة، أو قائمة المشاركات، أو رسالة الخطأ).

الخطوة 2: إضافة قائمة المشاركات إلى التطبيق

قم بتحديث ملف App.js الرئيسي ليشمل مكون PostsList:

// src/App.js
import React from 'react';
import PostsList from './features/posts/PostsList';

function App() {
  return (
    

      
    
  );
}

export default App;

4. أفضل الممارسات للمجموعات غير المتزامنة

تجنب المنطق الثقيل في المكونات: حافظ على نظافة المكونات عن طريق إرسال مجموعات كبيرة للتعامل مع المنطق غير المتزامن.
مركزية معالجة الأخطاء: تعامل مع الأخطاء في شريحتك بدلاً من تكرار المنطق في كل مكون.
تطبيع البيانات: فكر في تطبيع شكل الحالة باستخدام مكتبات مثل Normalizr لإدارة هياكل البيانات المعقدة بكفاءة.
حفظ المحددات: استخدم createSelector من إعادة التحديد لحفظ المحددات للحصول على أداء أفضل.

5. الخلاصة والخطوات التالية
في هذا الجزء، اكتشفنا كيفية التعامل مع المنطق غير المتزامن في Redux Toolkit باستخدام createAsyncThunk. لقد تعلمنا كيفية إنشاء مجموعة غير متزامنة والتعامل مع الحالات المختلفة واستخدامها في أحد المكونات. في الجزء التالي، سنتعمق في RTK Query، وهي أداة قوية لجلب البيانات وتخزينها مؤقتًا والتي تعمل على تبسيط عملية تطوير Redux.

_
ترقبوا الجزء 3: مقدمة إلى استعلام RTK!_