Recoil شمشیر سامورایی مدیریت React State است

امروز رویکرد جدیدی را برای ارائه این مقاله با افزودن یک لمس سامورایی. من صمیمانه امیدوارم که به تجربه خواندن شما بیفزاید. نظرات شما همیشه مورد استقبال و قدردانی قرار می گیرد، لطفا نظرات خود را در بخش نظرات زیر به اشتراک بگذارید.

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

با روحیه سامورایی، بیایید ماجراجویی خود را آغاز کنیم..

نصب Recoil – The Way of Samurai

می توانید Recoil را با استفاده از آن نصب کنید npm یا yarn با اجرای دستور زیر در ترمینال خود:

npm install recoil

قطعاتی که از حالت پس زدگی استفاده می کنند نیاز دارند RecoilRoot برای ظاهر شدن در جایی در درخت مادر. یک مکان خوب برای قرار دادن این در کامپوننت ریشه شما است:

import React from "react";
import ReactDOM from "react-dom/client";
import { RecoilRoot } from "recoil";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <RecoilRoot>
      <App />
    </RecoilRoot>
  </React.StrictMode>
);

این تضمین می‌کند که حالت برای همه مؤلفه‌های فرزندی که به آن نیاز دارند در دسترس است و از بروز هرگونه مشکل احتمالی در مورد عدم دسترسی مؤلفه‌ها به حالت به دلیل از دست رفتن جلوگیری می‌کند. RecoilRoot اجزاء. در راه سامورایی ها جایی برای خطا نیست. پس با هوشیاری و افتخار پیش بروید.

Recoil چیست؟

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

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

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

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

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

یک اتم ایجاد کنید

در راه سامورایی ها، یک اتم در Recoil مانند یک شمشیر است. این یک واحد حالت است که می تواند توسط بخش های مختلف برنامه شما خوانده و نوشته شود. برای ایجاد یک اتم می توانید از تابع اتم از کتابخانه Recoil استفاده کنید.

تا نشون بدم منظورم چیه..

import { atom } from 'recoil';

export const weaponState = atom({
  key: 'weaponState',
  default: {
    name: 'Katana',
    damage: 50,
  },
});

از اتم در یک جزء استفاده کنید

کامپوننت ها می توانند مشترک شوند اتم ها و انتخابگرها.
برای استفاده از weaponState اتم در یک جزء می توانید از آن استفاده کنید useRecoilState قلاب از کتابخانه Recoil.

تا نشون بدم منظورم چیه..

import React from 'react';
import { useRecoilState } from 'recoil';
import { weaponState } from './atoms';

function WeaponDisplay() {
  const [weapon, setWeapon] = useRecoilState(weaponState);

  return (
    <div>
      <h1>{weapon.name}</h1>
      <p>Damage: {weapon.damage}</p>
      <button onClick={() => setWeapon({ name: 'Nodachi', damage: 70 })}>
        Upgrade Weapon
      </button>
    </div>
  );
}

همانطور که در مثال بالا، ما با استفاده از useRecoilState قلاب برای دسترسی به weaponState اتم و مقدار فعلی آن ما همچنین دکمه‌ای را ارائه می‌کنیم که به کاربر امکان می‌دهد با تنظیم اتم روی یک مقدار جدید، سلاح خود را ارتقا دهد.

انتخابگر ایجاد کنید

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

تا نشون بدم منظورم چیه..

import { selector } from 'recoil';
import { weaponState } from './atoms';

export const weaponDamageSelector = selector({
  key: 'weaponDamageSelector',
  get: ({ get }) => {
    const weapon = get(weaponState);
    return weapon.damage;
  },
});

از انتخابگر در کامپوننت استفاده کنید

سپس می توانیم استفاده کنیم انتخابگر در اجزای ما با استفاده از useRecoilValue قلاب همان اتم ها.

تا نشون بدم منظورم چیه..

import React from 'react';
import { useRecoilState } from 'recoil';
import { weaponDamageSelector } from './selectors';

function WeaponDisplay() {
  const weaponDamage = useRecoilState(weaponDamageSelector);

  return (
    <div>
      <p>Weapon damage: {weaponDamage}</p>
    </div>
  );
}

یک atomFamily ایجاد کنید

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

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

import { atomFamily } from 'recoil';

export const weaponAtomFamily = atomFamily({
  key: 'weaponAtomFamily',
  default: id => ({
    name: `Weapon - ${id}`,
    damage: 50,
  }),
});

در مثال فوق، id آرگومان در تابع پیش فرض، شناسه منحصر به فرد برای هر اتم در خانواده است. پس وقتی تماس می گیریم weaponAtomFamily('Wakizashiv')، تابع پیش فرض با “Wakizashiv” به عنوان فراخوانی می شود id آرگومان و یک شی را نشان می دهد که سلاح پیش فرض آن سامورایی را نشان می دهد.

از atomFamily در یک کامپوننت استفاده کنید

یک atomFamily() تقریباً همان گزینه های ساده را می گیرد atom(). اما مقدار پیش فرض را نیز می توان پارامتر کرد. این بدان معناست که شما می توانید تابعی را ارائه دهید که مقدار پارامتر را می گیرد و مقدار پیش فرض واقعی را برمی گرداند.

import React from 'react';
import { useRecoilState } from 'recoil';
import { weaponAtomFamily } from './atoms';

function WeaponDisplay() {
  const [weapon, setWeapon] = useRecoilState(weaponAtomFamily('Wakizashiv'));

  return (
    <div>
      <h1>{weapon.name}</h1>
      <p>Damage: {weapon.damage}</p>
      <button onClick={() => setWeapon({ name: 'Weapon - Nodachi', damage: 70 })}>
        Upgrade Weapon
      </button>
    </div>
  );
}

چرا از Recoil استفاده کنیم؟

Recoil مزایای متعددی را نسبت به سایر کتابخانه های مدیریت دولتی برای React مانند Redux فراهم می کند. بیایید چند دلیل را ببینیم که چرا ممکن است بخواهید از Recoil در پروژه های React خود استفاده کنید:

مدیریت دولتی ساده شده

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

بدون دیگ بخار

Recoil همچنین مقدار کد دیگ بخار مورد نیاز برای مدیریت وضعیت یک برنامه React را کاهش می دهد. این به شما امکان می دهد اتم ها و انتخابگرها را با حداقل کد دیگ بخار تعریف کنید.
در طرف دیگر، در Redux برای مدیریت وضعیت برنامه خود باید اکشن ها، سازندگان اکشن، کاهنده ها و ذخیره اشیاء را تعریف کنید.

عملکرد بهتر

Recoil عملکرد بهتری را نسبت به سایر کتابخانه های مدیریت دولتی برای React ارائه می دهد. این به این دلیل است که Recoil از الگوریتم جدیدی به نام the استفاده می کند نمودار وابستگی که به آن اجازه می دهد وابستگی بین اتم ها و انتخابگرها را به طور موثرتری ردیابی کند. نمودار وابستگی تضمین می کند که تنها مؤلفه هایی که باید دوباره رندر شوند، زمانی که وضعیت یک اتم یا انتخابگر تغییر می کند که عملکرد برنامه شما را بهبود می بخشد، دوباره رندر می شوند.

نحو آشنا

Recoil از نحوی استفاده می کند که شبیه به قلاب های داخلی React است useState() و useEffect(). این امر یادگیری و استفاده از Recoil را برای توسعه دهندگانی که قبلاً با React آشنا هستند آسان می کند.

انعطاف پذیر و مقیاس پذیر

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

نبرد پس زدن و ردوکس

پس هموطنان سامورایی من، بیایید با هم به عنوان جنگجویان نترس سامورایی به فصل آخر ماجراجویی خود برویم.

افکت اتم چیست؟

اثرات اتم یک ویژگی در Recoil است که به شما اجازه می دهد تا زمانی که مقدار یک اتم تغییر می کند، عوارض جانبی را اجرا کنید. عوارض جانبی هر عملیاتی است که در خارج از حالت اتم تأثیر داشته باشد. مانند درخواست های شبکه، ذخیره سازی محلی یا ورود به سیستم.

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

با کمک Atom Effects، می‌توانید اشتراک‌هایی را به یک اتم اضافه کنید که هر زمان که مقدار اتم تغییر کرد فعال می‌شود. اشتراک‌ها می‌توانند هر گونه عوارض جانبی را که برای برنامه شما ضروری است، اجرا کنند. عوارض جانبی می تواند همزمان یا ناهمزمان باشد.

Atom Effects می تواند در شرایطی مفید باشد که شما نیاز به اجرای عوارض جانبی بر اساس وضعیت فعلی برنامه خود دارید. به عنوان مثال، ممکن است بخواهید هر زمان که کاربر تغییری در صفحه تنظیمات ایجاد می کند، تنظیمات برگزیده کاربر را در حافظه محلی ذخیره کنید.

افکت‌های اتم نیروهای پنهانی هستند که دنیای اطراف ما را شکل می‌دهند، درست همانطور که شمشیر سامورایی توسط فعل و انفعالات نادیده اتم‌هایش شکل می‌گیرد.

تا نشون بدم منظورم چیه..

import { atom, useRecoilState } from 'recoil';

export const weaponState = atom({
  key: "weaponState",
  default: {
    name: "Katana",
    damage: 50,
  },
  /* Atom Effects */
  effects: [
    ({ onSet }) => {
      onSet(weapon => {
        console.log(`The weapon has upgrade to ${weapon.name}`);
      });
    },
  ],
});

function WeaponDisplay() {
  const [weapon, setWeapon] = useRecoilState(weaponState);

  return (
    <div>
      <h1>{weapon.name}</h1>
      <button onClick={() => setWeapon({ name: 'Nodachi' })}>
        Upgrade Weapon
      </button>
    </div>
  );
}

را onSet هنگامی که مقدار the فراخوانی می شود weaponState اتم تغییر می کند در مثال بالا، ما به سادگی سلاح جدید اتم را در کنسول ثبت می کنیم، اما می توانیم به همین راحتی یک اثر جانبی پیچیده تر را اجرا کنیم.

پایان ماجراجویی

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

هموطنان سامورایی من، بیایید هنر عقب نشینی را در پیش بگیریم و بر روش های مدیریت دولتی مسلط شویم.

انگیزه

🍀حمایت کنید

لطفا با عضویت در کانال ما را دنبال کنید و از ما حمایت کنید. حمایت شما بسیار قابل قدردانی است و به ما کمک می کند تا به تولید محتوا برای لذت بردن شما ادامه دهیم. از شما برای پیشبرد حمایتتان سپاسگزاریم!

یوتیوب
GitHub
توییتر