۲۲ شهریور ۱۴۰۴فارسی

با ماشین‌های حالت، useActionState ری‌اکت را برای ساخت رابط‌های کاربری قوی و قابل پیش‌بینی کاوش کنید. منطق انتقال وضعیت اکشن را برای برنامه‌های پیچیده بیاموزید.

ماشین حالت useActionState در ری‌اکت: تسلط بر منطق انتقال وضعیت اکشن

هوک useActionState ری‌اکت، یک هوک قدرتمند است که در ری‌اکت ۱۹ معرفی شده (در حال حاضر در نسخه canary) و برای ساده‌سازی به‌روزرسانی‌های وضعیت ناهمزمان، به‌ویژه هنگام کار با اکشن‌های سرور، طراحی شده است. هنگامی که با یک ماشین حالت ترکیب می‌شود، روشی زیبا و قوی برای مدیریت تعاملات پیچیده رابط کاربری و انتقال وضعیت‌ها فراهم می‌کند. این پست وبلاگ به بررسی چگونگی استفاده مؤثر از useActionState با یک ماشین حالت برای ساخت برنامه‌های ری‌اکت قابل پیش‌بینی و قابل نگهداری می‌پردازد.

ماشین حالت چیست؟

ماشین حالت یک مدل محاسباتی ریاضی است که رفتار یک سیستم را به صورت تعداد محدودی از وضعیت‌ها و انتقال‌ها بین آن وضعیت‌ها توصیف می‌کند. هر وضعیت نشان‌دهنده یک شرایط متمایز سیستم است و انتقال‌ها نشان‌دهنده رویدادهایی هستند که باعث می‌شوند سیستم از یک وضعیت به وضعیت دیگر حرکت کند. آن را مانند یک فلوچارت در نظر بگیرید، اما با قوانین سخت‌گیرانه‌تر در مورد چگونگی حرکت بین مراحل.

استفاده از ماشین حالت در برنامه ری‌اکت شما چندین مزیت دارد:

پیش‌بینی‌پذیری: ماشین‌های حالت یک جریان کنترل واضح و قابل پیش‌بینی را اعمال می‌کنند، که استدلال در مورد رفتار برنامه شما را آسان‌تر می‌کند.
قابلیت نگهداری: با جدا کردن منطق وضعیت از رندرینگ رابط کاربری، ماشین‌های حالت سازماندهی کد را بهبود بخشیده و نگهداری و به‌روزرسانی برنامه شما را آسان‌تر می‌کنند.
قابلیت تست: ماشین‌های حالت ذاتاً قابل تست هستند زیرا شما به راحتی می‌توانید رفتار مورد انتظار برای هر وضعیت و انتقال را تعریف کنید.
نمایش بصری: ماشین‌های حالت می‌توانند به صورت بصری نمایش داده شوند، که به برقراری ارتباط در مورد رفتار برنامه با سایر توسعه‌دهندگان یا ذی‌نفعان کمک می‌کند.

معرفی `useActionState`

هوک useActionState به شما امکان می‌دهد تا نتیجه یک اکشن را که به طور بالقوه وضعیت برنامه را تغییر می‌دهد، مدیریت کنید. این هوک برای کار یکپارچه با اکشن‌های سرور طراحی شده است، اما می‌توان آن را برای اکشن‌های سمت کلاینت نیز تطبیق داد. این هوک روشی تمیز برای مدیریت وضعیت‌های بارگذاری، خطاها و نتیجه نهایی یک اکشن فراهم می‌کند و ساخت رابط‌های کاربری واکنش‌گرا و کاربرپسند را آسان‌تر می‌سازد.

در اینجا یک مثال ساده از نحوه استفاده از useActionState آورده شده است:


const [state, dispatch] = useActionState(async (prevState, formData) => {
  // منطق اکشن شما در اینجا
  try {
    const result = await someAsyncFunction(formData);
    return { ...prevState, data: result };
  } catch (error) {
    return { ...prevState, error: error.message };
  }
}, { data: null, error: null });

در این مثال:

آرگومان اول یک تابع ناهمزمان است که اکشن را انجام می‌دهد. این تابع وضعیت قبلی و داده‌های فرم (در صورت وجود) را دریافت می‌کند.
آرگومان دوم وضعیت اولیه است.
این هوک یک آرایه حاوی وضعیت فعلی و یک تابع dispatch را برمی‌گرداند.

ترکیب `useActionState` و ماشین‌های حالت

قدرت واقعی از ترکیب useActionState با یک ماشین حالت ناشی می‌شود. این به شما امکان می‌دهد تا انتقال‌های وضعیت پیچیده‌ای را که توسط اکشن‌های ناهمزمان فعال می‌شوند، تعریف کنید. بیایید سناریویی را در نظر بگیریم: یک کامپوننت ساده فروشگاهی که جزئیات محصول را واکشی می‌کند.

مثال: واکشی جزئیات محصول

ما وضعیت‌های زیر را برای کامپوننت جزئیات محصول خود تعریف خواهیم کرد:

Idle (بیکار): وضعیت اولیه. هنوز هیچ جزئیات محصولی واکشی نشده است.
Loading (در حال بارگذاری): وضعیتی که در آن جزئیات محصول در حال واکشی است.
Success (موفقیت): وضعیتی که پس از واکشی موفقیت‌آمیز جزئیات محصول به وجود می‌آید.
Error (خطا): وضعیتی که در صورت بروز خطا در حین واکشی جزئیات محصول ایجاد می‌شود.

ما می‌توانیم این ماشین حالت را با استفاده از یک آبجکت نمایش دهیم:


const productDetailsMachine = {
  initial: 'idle',
  states: {
    idle: {
      on: {
        FETCH: 'loading',
      },
    },
    loading: {
      on: {
        SUCCESS: 'success',
        ERROR: 'error',
      },
    },
    success: {
      type: 'final',
    },
    error: {
      on: {
        FETCH: 'loading',
      },
    },
  },
};

این یک نمایش ساده شده است؛ کتابخانه‌هایی مانند XState پیاده‌سازی‌های پیچیده‌تری از ماشین حالت با ویژگی‌هایی مانند وضعیت‌های سلسله مراتبی، وضعیت‌های موازی و گاردها (guards) ارائه می‌دهند.

پیاده‌سازی در ری‌اکت

اکنون، بیایید این ماشین حالت را با useActionState در یک کامپوننت ری‌اکت ادغام کنیم.


import React from 'react';
// اگر می‌خواهید تجربه کامل ماشین حالت را داشته باشید، XState را نصب کنید. برای این مثال ساده، ما از یک آبجکت ساده استفاده خواهیم کرد.
// import { createMachine, useMachine } from 'xstate';

const productDetailsMachine = {
  initial: 'idle',
  states: {
    idle: {
      on: {
        FETCH: 'loading',
      },
    },
    loading: {
      on: {
        SUCCESS: 'success',
        ERROR: 'error',
      },
    },
    success: {
      type: 'final',
    },
    error: {
      on: {
        FETCH: 'loading',
      },
    },
  },
};


function ProductDetails({ productId }) {
  const [state, dispatch] = React.useReducer(
    (state, event) => {
      const nextState = productDetailsMachine.states[state].on[event];
      return nextState || state; // اگر انتقالی تعریف نشده باشد، وضعیت بعدی یا وضعیت فعلی را برگردانید
    },
    productDetailsMachine.initial
  );


  const [productData, setProductData] = React.useState(null);
  const [error, setError] = React.useState(null);

  React.useEffect(() => {
    if (state === 'loading') {
      const fetchData = async () => {
        try {
          const response = await fetch(`https://api.example.com/products/${productId}`); // با اندپوینت API خود جایگزین کنید
          if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
          }
          const data = await response.json();
          setProductData(data);
          setError(null);
          dispatch('SUCCESS');
        } catch (e) {
          setError(e.message);
          setProductData(null);
          dispatch('ERROR');
        }
      };
      fetchData();
    }
  }, [state, productId, dispatch]);

  const handleFetch = () => {
    dispatch('FETCH');
  };

  return (
    
      Product Details
      {state === 'idle' && }
      {state === 'loading' && Loading...}
      {state === 'success' && (
        
          {productData.name}
          {productData.description}
          Price: ${productData.price}
        
      )}
      {state === 'error' && Error: {error}}
    
  );
}

export default ProductDetails;

توضیح:

ما productDetailsMachine را به عنوان یک آبجکت جاوا اسکریپت ساده که ماشین حالت ما را نمایش می‌دهد، تعریف می‌کنیم.
ما از React.useReducer برای مدیریت انتقال‌های وضعیت بر اساس ماشین خود استفاده می‌کنیم.
ما از هوک useEffect ری‌اکت برای فعال کردن واکشی داده‌ها زمانی که وضعیت 'loading' است، استفاده می‌کنیم.
تابع handleFetch رویداد 'FETCH' را dispatch می‌کند و وضعیت بارگذاری را آغاز می‌کند.
کامپوننت محتوای متفاوتی را بر اساس وضعیت فعلی رندر می‌کند.

استفاده از `useActionState` (فرضی - ویژگی ری‌اکت ۱۹)

در حالی که useActionState هنوز به طور کامل در دسترس نیست، در اینجا نحوه پیاده‌سازی آن پس از در دسترس قرار گرفتن نشان داده شده است که رویکرد تمیزتری را ارائه می‌دهد:


import React from 'react';
//import { useActionState } from 'react'; // زمانی که در دسترس قرار گرفت از حالت کامنت خارج کنید

const productDetailsMachine = {
  initial: 'idle',
  states: {
    idle: {
      on: {
        FETCH: 'loading',
      },
    },
    loading: {
      on: {
        SUCCESS: 'success',
        ERROR: 'error',
      },
    },
    success: {
      type: 'final',
    },
    error: {
      on: {
        FETCH: 'loading',
      },
    },
  },
};

function ProductDetails({ productId }) {
  const initialState = { state: productDetailsMachine.initial, data: null, error: null };

  // پیاده‌سازی فرضی useActionState
  const [newState, dispatch] = React.useReducer(
    (state, event) => {
      const nextState = productDetailsMachine.states[state.state].on[event];
      return nextState ? { ...state, state: nextState } : state; // اگر انتقالی تعریف نشده باشد، وضعیت بعدی یا وضعیت فعلی را برگردانید
    },
    initialState
  );

  const handleFetchProduct = async () => {
    dispatch('FETCH');

      try {
        const response = await fetch(`https://api.example.com/products/${productId}`); // با اندپوینت API خود جایگزین کنید
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();

        // با موفقیت واکشی شد - SUCCESS را با داده‌ها dispatch کنید!
        dispatch('SUCCESS');

       // داده‌های واکشی شده را در وضعیت محلی ذخیره کنید. نمی‌توان از dispatch در داخل reducer استفاده کرد.
       newState.data = data; // خارج از dispatcher به‌روزرسانی کنید

      } catch (error) {
        // خطا رخ داد - ERROR را با پیام خطا dispatch کنید!
        dispatch('ERROR');

         // خطا را در یک متغیر جدید برای نمایش در render() ذخیره کنید
         newState.error = error.message;
      }
    //}, initialState);
  };

  return (
    
      Product Details
      {newState.state === 'idle' && }
      {newState.state === 'loading' && Loading...}
      {newState.state === 'success' && newState.data && (
        
          {newState.data.name}
          {newState.data.description}
          Price: ${newState.data.price}
        
      )}
      {newState.state === 'error' && newState.error && Error: {newState.error}}
    
  );
}

export default ProductDetails;

نکته مهم: این مثال فرضی است زیرا useActionState هنوز به طور کامل در دسترس نیست و API دقیق آن ممکن است تغییر کند. من آن را با useReducer استاندارد برای اجرای منطق اصلی جایگزین کرده‌ام. با این حال، هدف این است که نشان دهیم چگونه شما *باید* از آن استفاده کنید، زمانی که در دسترس قرار گرفت و شما باید useReducer را با useActionState جایگزین کنید. در آینده با useActionState، این کد باید با حداقل تغییرات همانطور که توضیح داده شد کار کند و مدیریت داده‌های ناهمزمان را به شدت ساده کند.

مزایای استفاده از `useActionState` با ماشین‌های حالت

جداسازی واضح مسئولیت‌ها: منطق وضعیت در داخل ماشین حالت کپسوله شده است، در حالی که رندرینگ رابط کاربری توسط کامپوننت ری‌اکت مدیریت می‌شود.
خوانایی بهتر کد: ماشین حالت یک نمایش بصری از رفتار برنامه ارائه می‌دهد که درک و نگهداری آن را آسان‌تر می‌کند.
مدیریت ساده‌تر ناهمزمانی: useActionState مدیریت اکشن‌های ناهمزمان را ساده کرده و کد تکراری را کاهش می‌دهد.
قابلیت تست بهبود یافته: ماشین‌های حالت ذاتاً قابل تست هستند و به شما امکان می‌دهند به راحتی صحت رفتار برنامه خود را تأیید کنید.

مفاهیم پیشرفته و ملاحظات

ادغام با XState

برای نیازهای پیچیده‌تر مدیریت وضعیت، استفاده از یک کتابخانه اختصاصی ماشین حالت مانند XState را در نظر بگیرید. XState یک چارچوب قدرتمند و انعطاف‌پذیر برای تعریف و مدیریت ماشین‌های حالت، با ویژگی‌هایی مانند وضعیت‌های سلسله مراتبی، وضعیت‌های موازی، گاردها و اکشن‌ها ارائه می‌دهد.


// مثال با استفاده از XState
import { createMachine, useMachine } from 'xstate';

const productDetailsMachine = createMachine({
  id: 'productDetails',
  initial: 'idle',
  states: {
    idle: {
      on: {
        FETCH: 'loading',
      },
    },
    loading: {
      invoke: {
        id: 'fetchProduct',
        src: (context, event) => fetch(`https://api.example.com/products/${context.productId}`).then(res => res.json()),
        onDone: {
          target: 'success',
          actions: assign({ product: (context, event) => event.data })
        },
        onError: {
          target: 'error',
          actions: assign({ error: (context, event) => event.data })
        }
      }
    },
    success: {
      type: 'final',
    },
    error: {
      on: {
        FETCH: 'loading',
      },
    },
  },
}, {
  services: {
    fetchProduct: (context, event) => fetch(`https://api.example.com/products/${context.productId}`).then(res => res.json())
  }
});

این روشی اعلانی‌تر و قوی‌تر برای مدیریت وضعیت فراهم می‌کند. حتماً آن را با استفاده از دستور زیر نصب کنید: npm install xstate

مدیریت وضعیت سراسری

برای برنامه‌هایی با نیازهای پیچیده مدیریت وضعیت در چندین کامپوننت، استفاده از یک راه حل مدیریت وضعیت سراسری مانند Redux یا Zustand را در کنار ماشین‌های حالت در نظر بگیرید. این به شما امکان می‌دهد وضعیت برنامه خود را متمرکز کرده و به راحتی بین کامپوننت‌ها به اشتراک بگذارید.

تست ماشین‌های حالت

تست ماشین‌های حالت برای اطمینان از صحت و قابلیت اطمینان برنامه شما بسیار مهم است. شما می‌توانید از فریمورک‌های تست مانند Jest یا Mocha برای نوشتن تست‌های واحد برای ماشین‌های حالت خود استفاده کنید و تأیید کنید که آنها بین وضعیت‌ها همانطور که انتظار می‌رود انتقال می‌یابند و رویدادهای مختلف را به درستی مدیریت می‌کنند.

در اینجا یک مثال ساده آورده شده است:


// مثال تست Jest
import { interpret } from 'xstate';
import { productDetailsMachine } from './productDetailsMachine';

describe('productDetailsMachine', () => {
  it('should transition from idle to loading on FETCH event', (done) => {
    const service = interpret(productDetailsMachine).onTransition((state) => {
      if (state.value === 'loading') {
        expect(state.value).toBe('loading');
        done();
      }
    });

    service.start();
    service.send('FETCH');
  });
});

بین‌المللی‌سازی (i18n)

هنگام ساخت برنامه‌ها برای مخاطبان جهانی، بین‌المللی‌سازی (i18n) ضروری است. اطمینان حاصل کنید که منطق ماشین حالت و رندرینگ رابط کاربری شما به درستی برای پشتیبانی از چندین زبان و زمینه‌های فرهنگی بین‌المللی‌سازی شده است. موارد زیر را در نظر بگیرید:

محتوای متنی: از کتابخانه‌های i18n برای ترجمه محتوای متنی بر اساس منطقه کاربر استفاده کنید.
فرمت‌های تاریخ و زمان: از کتابخانه‌های قالب‌بندی تاریخ و زمان آگاه از منطقه برای نمایش تاریخ‌ها و زمان‌ها در فرمت صحیح برای منطقه کاربر استفاده کنید.
فرمت‌های ارزی: از کتابخانه‌های قالب‌بندی ارز آگاه از منطقه برای نمایش مقادیر ارزی در فرمت صحیح برای منطقه کاربر استفاده کنید.
فرمت‌های عددی: از کتابخانه‌های قالب‌بندی اعداد آگاه از منطقه برای نمایش اعداد در فرمت صحیح برای منطقه کاربر استفاده کنید (به عنوان مثال، جداکننده‌های اعشاری، جداکننده‌های هزارگان).
چیدمان راست-به-چپ (RTL): از چیدمان‌های RTL برای زبان‌هایی مانند عربی و عبری پشتیبانی کنید.

با در نظر گرفتن این جنبه‌های i18n، می‌توانید اطمینان حاصل کنید که برنامه شما برای مخاطبان جهانی قابل دسترس و کاربرپسند است.

نتیجه‌گیری

ترکیب useActionState ری‌اکت با ماشین‌های حالت، رویکردی قدرتمند برای ساخت رابط‌های کاربری قوی و قابل پیش‌بینی ارائه می‌دهد. با جدا کردن منطق وضعیت از رندرینگ رابط کاربری و اعمال یک جریان کنترل واضح، ماشین‌های حالت سازماندهی کد، قابلیت نگهداری و قابلیت تست را بهبود می‌بخشند. در حالی که useActionState هنوز یک ویژگی آینده است، درک چگونگی ادغام ماشین‌های حالت در حال حاضر شما را برای بهره‌مندی از مزایای آن در زمان در دسترس قرار گرفتن آماده می‌کند. کتابخانه‌هایی مانند XState قابلیت‌های مدیریت وضعیت پیشرفته‌تری را ارائه می‌دهند و مدیریت منطق پیچیده برنامه را آسان‌تر می‌کنند.

با پذیرش ماشین‌های حالت و useActionState، می‌توانید مهارت‌های توسعه ری‌اکت خود را ارتقا دهید و برنامه‌هایی بسازید که برای کاربران در سراسر جهان قابل اعتمادتر، قابل نگهداری‌تر و کاربرپسندتر باشند.

ماشین حالت useActionState در ری‌اکت: تسلط بر منطق انتقال وضعیت اکشن

ماشین حالت چیست؟

معرفی useActionState

ترکیب useActionState و ماشین‌های حالت