برنامه شمارنده

کامپوننت Counter یک مثال ساده است که نحوه استفاده از Rosma را برای مدیریت استیت در برنامه React نشان می دهد. در این مثال از useObserver برای ایجاد یک متغیر سراسری به نام count با مقدار اولیه ۰ و یک متد setter به نام setCount استفاده می کنیم.


import { useObserver } from 'rosma';

export default function Counter() {
  const { count, setCount } = useObserver(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      <span>مقدار count برابر است با : </span>
      {count}
    </button>
  );
}


import { useObserver } from 'rosma';

type State = {
  count: number;
};

export default function Counter() {
  const { count, setCount } = useObserver<State>(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      <span>مقدار count برابر است با : </span>
      {count}
    </button>
  );
}

میتوان همین مثال بالا را با استفاده از withState به صورت زیر بازنویسی کرد :


import { withState } from 'rosma';

function Counter({ count = 0, setCount }) {
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

export default withState(Counter);


import { withState, WithSetters } from 'rosma';

function Counter({ count = 0, setCount }: WithSetters<{ count: number }>) {
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

export default withState(Counter);

پیش نمایش

در مثال بالا، ما از هوک useObserver برای ایجاد یک متغیر سراسری به نام count استفاده کرده و متد تنظیم کننده مربوط به آن را setCount نام گذاری می‌کنیم. مقدار اولیه count روی ۰ تنظیم شده است.

برای به‌روزرسانی متغیر count، به سادگی متد تنظیم‌کننده مربوطه آن setCount را با مقدار جدید صدا میزنیم. در این مورد، هر بار که روی دکمه کلیک می‌شود، مقدار count را با ۱ جمع میکنیم.

امکان جابجایی متغیر ها

شایان ذکر است که نیازی به رعایت ترتیب خاصی در هنگام دریافت کردن متغیرها از هوک useObserver ندارید. رُزما به طور خودکار مقادیر صحیح را به هر متغیر بر اساس نام آنها اختصاص می دهد.


import { useObserver } from 'rosma';

export default function Counter() {
  const { setCount, count } = useObserver(0);

  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}


import { useObserver } from 'rosma';

type State = {
  count: number;
};

export default function Counter() {
  const { setCount, count } = useObserver<State>(0);

  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

در مثال بالا، ما متغیرهای setCount و count را به ترتیبی خلاف مثال قبلی دریافت کردیم و Rosma همچنان می‌تواند مقادیر صحیح را به هر متغیر اختصاص دهد.

حساس نبودن به حروف بزرگ و کوچک

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


import { useObserver } from 'rosma';

export default function Counter() {
  const { CouNt, setcOunT } = useObserver(0);

  return <button onClick={() => setcOunT(CouNt + 1)}>{CouNt}</button>;
}


import { useObserver } from 'rosma';

export default function Counter() {
  const { CouNt, setcOunT } = useObserver(0);

  return <button onClick={() => setcOunT(CouNt + 1)}>{CouNt}</button>;
}

در مثال بالا، ما متغیر count را به عنوان CouNt و method تنظیم کننده متناظر آن را به عنوان setcOunT نامگذاری کردیم، هر دو با ترکیبی از حروف کوچک و بزرگ. رزما هنوز هم قادر است مقادیر صحیح را به هر متغیر بر اساس نام آنها اختصاص دهد.

کلید واژه ها: ری اکت, مدیریت استیت, رُزما, useObserver, استیت سراسری, نامگذاری مقادیر, استخراج مقادیر, متد تنظیم کننده, حساس نبودن به حروف, قواعد نامگذاری

قبلی: نصب و راه اندازی

بعدی: گرفتن همزمان چندین متغیر