مدیریت state ها به کمک recoil - قسمت ۲ atomFamily

به عنوان یک توسعه‌دهنده‌ی فرانت‌اند، قطعا در ساخت اپلیکیشن‌های پیچیده‌ی React با راه‌حل‌های مختلفی برای مدیریت State مواجه شده‌اید. یکی از کارآمدترین و ساده‌ترین کتابخانه‌های مدیریت State موجود در حال حاضر (Recoil.js) است. Recoil یک سیستم مدیریت State قابل پیش‌بینی و انعطاف‌پذیر ارائه می‌دهد که به‌طور مؤثری بروزرسانی‌های حالت را در سراسر کامپوننت‌های ری اکت مدیریت می‌کند.

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

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

برای ایجاد یک atomFamily ، می‌توانید از تابع atomFamily ارائه‌شده توسط Recoil استفاده کنید. این تابع یک پارامتر کلید (key) دریافت می‌کند که یک شناسه‌ی رشته‌ای منحصر به فرد برای خانواده‌ی اتم‌ها است. همچنین یک شیء پیکربندی را می‌پذیرد که در آن می‌توانید مقدار پیش‌فرض برای اتم‌ها و سایر ویژگی‌های Recoil را تعریف کنید.

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

import { atomFamily } from 'recoil';

const todoAtomFamily = atomFamily({
  key: 'todo',
  default: {
    id: '',
    title: '',
    completed: false,
  },
});

function TodoItem({ todoId }) {
  const todoState = useRecoilValue(todoAtomFamily(todoId));

  // باقی منطق کامپوننت
}

function TodoList() {
  const todos = useRecoilValue(todoListState);
  // ...

  return (
    <ul>
      {todos.map(todoId => (
        <li key={todoId}>
          <TodoItem todoId={todoId} />
        </li>
      ))}
    </ul>
  );
}

در مثال بالا، با استفاده از تابع atomFamily، todoAtomFamily را تعریف می‌کنیم. کلید خاص (todo) معرف شناسه‌ی خانواده‌ی اتم‌ها است. در داخل کامپوننت TodoList، روی کارها (todos) تکرار و کامپوننت TodoItem را برای هر کار رندر می‌کنیم و todoId مربوطه را پاس می‌دهیم. در داخل TodoItem، از قلاب useRecoilValue برای دسترسی به حالت هر آیتم کار بر اساس todoId ارائه‌شده استفاده می‌کنیم. به این ترتیب، هر آیتم کار حالت مستقل خود را دارد که توسط ریـاکتیل مدیریت می‌شود.

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

خانواده‌ی اتم، انعطاف‌پذیری بسیار خوبی نیز ارائه می‌دهد. حتی می‌توانید با استفاده از قلاب useSetRecoilState و ارسال کلید اتم خاص، مقدار یک اتم را در داخل خانواده به‌طور جداگانه به‌روزرسانی کنید. این ویژگی به‌خصوص زمانی مفید است که می‌خواهید به‌روزرسانی‌هایی را برای یک آیتم کار خاص انجام دهید بدون اینکه بقیه‌ی لیست را تحت تأثیر قرار دهید.

import { useSetRecoilState } from 'recoil';

function TodoItem({ todoId }) {
  const setTodoState = useSetRecoilState(todoAtomFamily(todoId));

  const toggleComplete = () => {
    setTodoState((oldTodoState) => ({
      ...oldTodoState,
      completed: !oldTodoState.completed,
    }));
  };

  // باقی منطق کامپوننت
}

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

در نتیجه، خانواده‌ی اتم ریـاکتیل یک ویژگی قدرتمند از کتابخانه‌ی مدیریت حالت ریـاکتیل است که مدیریت مؤثر ساختارهای حالت مرتبط در اپلیکیشن‌های ری اکت را امکان‌پذیر می‌کند. با ایجاد پویای اتم‌ها بر اساس یک پارامتر، خانواده‌ی اتم کد تکراری را حذف می‌کند و یک روش راحت برای مدیریت حالت برای لیست‌ها، رابط‌های کاربری تب‌بندی‌شده یا هر سناریویی که چندین نمونه از کامپوننت‌های با ساختار مشابه وجود دارند، فراهم می‌کند. بهره‌گیری از خانواده‌ی اتم ریـاکتیل در مدیریت حالت ری اکت ریـاکتیل شما می‌تواند مقیاس‌پذیری و قابلیت نگهداری اپلیکیشن‌های شما را به‌طور قابل‌توجهی بهبود بخشد.