مدیریت استیت با Recoil در React: بررسی کلی با مثال

Recoil یک کتابخانه مدیریت استیت آزمایشی است و چندین قابلیت را ارائه می دهد که دستیابی به آنها به تنهایی با React دشوار است. در این مقاله با recoil.js و نحوه مدیریت استیت در react آشنا می شویم. Recoil js یکی دیگر از کتابخانه های مدیریت استیت برای React است. اگرچه ما قبلاً Redux را داریم. Mobx، Context، اما در اینجا ما یک ورود نور جدید در جامعه دریافت کردیم.

چرا می گویم سبک، در پایان این مقاله متوجه خواهید شد. اگر با جدید ترین ویژگی های React 19 آشنا نیستید این مقاله را بررسی کنید.

Recoil.js چیست؟

Recoil برای ارائه جایگزینی برای Redux ایجاد شد که یکی دیگر از کتابخانه های مدیریت استیت محبوب React است. در ماجراجویی امروز، خواهیم دید که Recoil چیست، چگونه کار می کند، چرا ممکن است بخواهید از آن در برنامه های React خود استفاده کنید و موارد دیگر.

Recoil یک کتابخانه مدیریت استیت برای React است که توسط فیسبوک در سال 2020 منتشر شد. این یک راه ساده و بصری برای مدیریت استیت یک برنامه React ارائه می دهد. Recoil در بالای Context API React ساخته شده است که برای انتقال داده ها به درخت کامپوننت استفاده می شود. به هر حال، Recoil روشی قدرتمندتر و انعطاف‌پذیرتر برای مدیریت استیت یک برنامه کاربردی نسبت به Context API ارائه می‌کند.

ایده اصلی پشت پس زدن این است که استیت باید به عنوان مجموعه ای از اتم ها تعریف شود. اتم قطعه ای از استیت است که می تواند توسط کامپوننت خوانده و به روز شود. کامپوننت ها می توانند مشترک اتم ها شوند تا در صورت تغییر مقدار آنها مطلع شوند.

Recoil همچنین دارای یک سلاح مخفی است، انتخابگرها، توابع قدرتمندی که استیت جدیدی را از اتم ها یا انتخابگرهای دیگر به دست می آورند. انتخابگرها می توانند برای محاسبه داده های مشتق شده از وضعیت یک برنامه استفاده شوند.

Recoil در حال حاضر کمبود به روز رسانی و پشتیبانی نگهدارنده را تجربه می کند که باعث نگرانی توسعه دهندگان در جامعه شده است. از طرف دیگر، بسیاری از توسعه دهندگان از استفاده از Recoil لذت برده اند و آن را یک کتابخانه مدیریت استیت مفید می دانند. بنابراین توصیه می کنیم هنگام تصمیم گیری در مورد ادامه استفاده از آن در پروژه های جدید احتیاط کنید.

آخرین به روز رسانی Recoil در 12 اکتبر 2022 انجام شد. این عدم به روز رسانی باعث شده است که برخی از توسعه دهندگان به کتابخانه های مدیریت استیت دیگر روی بیاورند و ممکن است نشان دهد که Recoil دیگر گزینه قابل اعتمادی برای پروژه های آینده نیست. فقدان پشتیبانی نگهدارنده ممکن است به این معنی باشد که مشکلات و اشکالات به موقع برطرف نمی شوند که می تواند برای برنامه شما مشکل ایجاد کند.

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

چرا Recoil 

اولاً، مشکلات مدیریت استیت گلوبال را حل می کند.
آسان برای یادگیری؛ هیچ منطق اصلی جدیدی برای یادگیری وجود ندارد.
بسیار ساده، شبیه به react ست.
 

مفاهیم Recoil

دو مفهوم عمده وجود دارد:

اتم ها
انتخابگرها (selector)

یک چیز جدید؟ نگران نباشید این را به سرعت درک خواهید کرد.

Recoil چگونه کار می کند؟

هنر Recoil ریشه در درک دقیق سامورایی ها از دنیای اطرافشان دارد. با تعریف مجموعه ای از اتم ها و انتخابگرهایی که استیت یک برنامه کاربردی را نشان می دهند، کار می کند. اتم ها با استفاده از تابع ()atom تعریف می شوند، مقدار اولیه را به عنوان پارامتر می گیرد. انتخابگرها با استفاده از تابع ()selector تعریف می شوند که تابعی را می گیرد که استیت مشتق شده را به عنوان پارامتر محاسبه می کند. اتم ها و انتخابگرها با هم ستون فقرات Recoil را تشکیل می دهند.

اتم ها در Recoil 

این شبیه به نحوه استفاده از هوک useState در React است. اگر شما تازه وارد React Hooks هستید، راهنمای React Hooks را بررسی کنید.

مثال:

 const [age, setAge] = useState(0);

age: برای اعلان متغیر استیت استفاده می شود. setAge: این برای به روز رسانی متغیر استیت استفاده می شود.

1. بیایید با binding app root با Recoil شروع کنیم

اکنون باید چند تغییر در سطح ریشه برنامه خود ایجاد کنید، مانند قطعه زیر.

RecoilRoot مانند یک ارائه دهنده کانتکست گلوبال عمل می کند که استیت گلوبال  را با درخت برنامه شما به اشتراک می گذارد.

اکنون قطعه کد قدیمی خود را به روز کنید.

ReactDOM.render( <AppPage />, document.getElementById("root"))

به کد زیر :

import { RecoilRoot } from "recoil";

ReactDOM.render( 
 <RecoilRoot>
    <AppPage />
 </RecoilRoot>, document.getElementById("root"))

2. Atom را تنظیم کنید

Recoil این قسمت را اتم می نامد، جایی که ما کلید گلوبال، مقدار را تنظیم می کنیم.

import { atom } from "recoil";

const age = atom({
  key: "age", 
  default: 0  // default global value for age key
});

اکنون این اتم در سراسر برنامه قابل دسترسی خواهد بود.

آیا می دانید چه زمانی نباید از useMemo استفاده کرد؟ اگر نه این مقاله را بررسی کنید.

پروژه های React خود را با ابزار جدید و مدرن vite.js بسازید.

3. از اتم استفاده کنید

اکنون قطعه کد قدیمی خود را به روز کنید.

 const [age, setAge] = useState(0);

به :

import { useRecoilState } from 'recoil'
const [ageState, setAge] = useRecoilState(age);

برای نمای بزرگتر، در اینجا کد کامل آماده است:

import { atom,useRecoilState } from 'recoil'

const age = atom({
  key: "age", 
  default: 0  // default global value for age key
});

export const AgeCalculator = () => {
const [ageState, setAge] = useRecoilState(age);
}

خیلی راحت هست اینطور نیست؟ حالا بیایید به سراغ انتخابگرهای دیگر برویم.

آیا با React query آشنا هستید، اگر نه این مقاله را بررسی کنید.

انتخابگرها در Recoil

این شبیه به نحوه مدیریت استیت ها توسط Redux است.

اگر مقداری را بتوان از استیت استخراج/محاسبه کرد، آنگاه می‌توانیم از مقداردهی اولیه یک کلید استیت جداگانه بگذریم، که از انتخابگرها استفاده می‌کند.

1. انتخابگرها را تنظیم کنید

در مثال زیر، مقدار isChild را از کلید age دریافت می کنیم، سپس می توانیم مستقیماً به جای افزودن یک کلید یا اتم جدید از انتخابگر استفاده کنیم.

import {selector} from 'recoil'

const isChild = selector({
  key: "childage",
  get: ({ get }) => {
    const state = get(age);
    return state < 10 ;
  }
});

2. از انتخابگرها استفاده کنید

اکنون از انتخابگر فوق استفاده خواهد شد. در زیر قطعه کد از مقدار سن برای isChild استفاده کنید.

 const [ageState, setAge] = useRecoilState(age);

  const value = useRecoilValue(isChild);

برای نمای بزرگتر، در اینجا کد کامل آمده است :

import {selector, useRecoilState} from 'recoil' 

const isChild = selector({
  key: "childage",
  get: ({ get }) => {
    const state = get(age);
    return state < 10 ;
  }
});

export const AgeCalculator = () => {
    const [ageState, setAge] = useRecoilState(age);
   const value = useRecoilValue(isChild);
}

به همین راحتی..

برای آشنایی با ریداکس و ریداکس تول کیت می توانید این مقاله را بررسی کنید، و برای آشنایی دقیق و کامل با ریداکس تولکیت می توانید این مقاله را بررسی کنید.

نتیجه

امیدوارم متوجه شده باشید که چرا این کتابخانه را سبک می گویم. Recoil بر روی Context API React ساخته شده است و روشی قدرتمندتر و انعطاف پذیرتر برای مدیریت وضعیت یک برنامه کاربردی نسبت به Context API ارائه می دهد. این به شما امکان می دهد اتم ها و انتخابگرهایی را تعریف کنید که نشان دهنده استیت برنامه شما هستند. کامپوننت ها می توانند مشترک این اتم ها و انتخابگرها شوند تا در صورت تغییر مقدار آنها مطلع شوند. Recoil مزایای متعددی را نسبت به دیگر کتابخانه‌های مدیریت استیت برای React فراهم می‌کند، مانند مدیریت استیت ساده، بدون دیگ بخار، عملکرد بهتر، سینتکس آشنا و انعطاف‌پذیری و مقیاس‌پذیری. اگر به دنبال یک کتابخانه مدیریت استیت برای پروژه های React خود هستید، Recoil قطعاً ارزش بررسی دارد.

Recoil نسبتاً آسان، امیدوارکننده و در مراحل اولیه به نظر می رسد، اما باز هم این نسل بعدی است و برای به دست آوردن فضای خاص در جامعه زمان می برد.