مدیریت state با Recoil

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

Recoil یک رویکرد جدید برای مدیریت State ارائه می‌دهد، و با ارائه API های یکسری از چالش هایی که در مدیریت State داریم را حل می‌کند. با Recoil، شما می‌توانید حالت خود را به‌صورت اتمی ( atom ) مدیریت کنید، که باعث می‌شود استدلال و به‌روزرسانی حالت برنامه‌ی شما آسان‌تر شود.

مفهوم اصلی در Recoil اتم ( atom ) است، که نشان‌دهنده‌ی یک قطعه از State است که می‌توان از آن خواند و به آن نوشت. اتم‌ها بلوک‌های ساختمانی حالت برنامه‌ی شما هستند و می‌توانند با استفاده از تابع atom ارائه شده توسط Recoil ایجاد شوند.

بعد از ایجاد پروژه React و نصب کتابخانه Recoil به روش زیر از آن میتوانید استفاده کنید:

import React from 'react';
import { RecoilRoot, useRecoilValue, atom } from 'recoil';

const greetingState = atom({
  key: 'greetingState',
  default: 'Hello',
});

const Greeting = () => {
  const greeting = useRecoilValue(greetingState);

  return <h1>{greeting}, World!</h1>;
};

const App = () => (
  <RecoilRoot>
    <Greeting />
  </RecoilRoot>
);

export default App;

ابتدا component ای که به‌عنوان نقطه‌ی ورود Recoil در برنامه‌ی ما عمل می‌کند را داخل کامپوننت RecoilRoot قرار میدهیم. کامپوننت RecoilRoot به Recoil اجازه می‌دهد تا حالت اتم‌های ما را مدیریت کند و زمینه‌های لازم برای کار Recoil را فراهم می‌کند.

در این مثال، ما یک اتم به نام greetingState با استفاده از تابع atom از Recoil ایجاد می‌کنیم. این اتم نشان‌دهنده‌ی پیام خوشامدگویی است که می‌خواهیم در برنامه‌ی خود نمایش دهیم. ما مقدار اولیه‌ی اتم را به 'Hello' تنظیم می‌کنیم.

سپس، در کامپوننت Greeting ما، از useRecoilValue برای اشتراک‌گذاری مقدار اتم greetingState استفاده می‌کنیم. این hook به‌طور خودکار کامپوننت ما را به هرگونه به‌روزرسانی اتم مشترک می‌کند و تضمین می‌کند که کامپوننت ما هر زمان که مقدار اتم تغییر کرد، مجدداً رندر شود.

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

Recoil همچنین ویژگی‌های پیشرفته‌ای مانند selectorها و atomFamily در Recoil را ارائه می‌دهد، که به شما اجازه می‌دهند تا مقادیر را از اتم‌های خود استخراج کرده و عملیات‌های محاسباتی پرهزینه را به‌صورت cache انجام دهید. انتخابگرها می‌توانند با استفاده از تابع selector ارائه شده توسط Recoil ایجاد شوند و می‌توانند به یک یا چند اتم وابسته باشند.

به‌طور کلی، Recoil یک رویکرد نوآورانه برای مدیریت State در React ارائه می‌دهد، که مدیریت State را برای توسعه‌دهندگان آسان‌تر و شهودی‌تر می‌کند. اندازه‌ی کوچک آن، همراه با قابلیت‌های قدرتمند آن، آن را به یک انتخاب عالی برای پروژه‌های کوچک و بزرگ تبدیل می‌کند.

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

useRecoilState یک hook است که توسط Recoil، یک کتابخانه مدیریت وضعیت برای React، ارائه می‌شود. این hook به شما امکان می‌دهد مقدار یک اتم یا انتخابگر Recoil را بخوانید و بنویسید.

در زیر مثالی از استفاده از useRecoilState را می‌بینید:

import { useRecoilState } from 'recoil';
import { countState } from './atoms';

function Counter() {
  const [count, setCount] = useRecoilState(countState);

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <p>تعداد: {count}</p>
      <button onClick={increment}>افزایش</button>
      <button onClick={decrement}>کاهش</button>
    </div>
  );
}

در این مثال، یک اتم Recoil به نام countState داریم که مقدار تعداد را نمایش می‌دهد. هوک useRecoilState برای دریافت مقدار فعلی countState و تابع setter setCount برای به‌روزرسانی مقدار آن استفاده می‌شود.

توابع increment و decrement از تابع setCount برای به‌روزرسانی مقدار count با افزایش یا کاهش آن استفاده می‌کنند.

مقدار فعلی count در رابط کاربری نمایش داده می‌شود و توابع increment و decrement هنگام کلیک بر روی دکمه‌های مربوطه فعال می‌شوند.

با استفاده از useRecoilState، این کامپوننت به طور خودکار به تغییرات در وضعیت Recoil مشترک می‌شود و هر زمان که مقدار countState به‌روزرسانی می‌شود، مجدداً رندر می‌شود.