useObserver

useObserver یک هوک React است که تغییرات اخیر در مقادیری که از آن دریافت می‌کنید را رصد می‌کند و با تغییرات آن مقادیر، کامپوننت شما را مجدداً رندر می‌کند.

در هنگام استفاده از useObserver، شما می‌توانید برای متغیری که دریافت می‌کنید، یک مقدار اولیه در نظر بگیرید. اگر این متغیر قبلاً در استیت تعریف نشده باشد، مقدار اولیه شما در استیت برای آن متغیر ثبت می‌شود. اما اگر قبلاً یک مقدار برای آن متغیر موجود باشد، متغیر دریافتی از useObserver با همان مقدار قبلی مقداردهی می‌شود.

علاوه بر مقدار متغیر، useObserver یک تابع setter (تنظیم کننده) نیز برای آن متغیر ارائه می‌دهد که می‌توانید از آن برای به‌روزرسانی مقدار متغیر استفاده کنید. با فراخوانی تابع setter، useObserver وضعیت استیت را با مقدار جدید به‌روز می‌کند و باعث میشود که کامپوننت شما مجدداً رندر شود.

در اینجا یک مثال از نحوه استفاده از useObserver آورده شده است:

import { useObserver } from 'rosma';

export default function Example() {
  const { foo, setFoo } = useObserver('bar');

  return (
    <div>
      <p>Foo: {foo}</p>
      <button onClick={() => setFoo(foo === 'bar' ? 'baz' : 'bar')}>
        Toggle Foo
      </button>
    </div>
  );
}

import { useObserver } from 'rosma';

type State = {
  foo: 'bar' | 'baz';
};

export default function Example() {
  const { foo, setFoo } = useObserver<State>('bar');

  return (
    <div>
      <p>Foo: {foo}</p>
      <button onClick={() => setFoo(foo === 'bar' ? 'baz' : 'bar')}>
        Toggle Foo
      </button>
    </div>
  );
}

در این مثال از useObserver برای ثبت یک متغیر در استیت، به نام foo با مقدار اولیه bar استفاده شده است. همانطور که مشاهده میشود در کنار مقدار foo یک تابع setter با نام setFoo از useObserver دریافت شده تا با استفاده از آن، بعد از کلیک شدن روی دکمه Toggle Foo مقدار foo در استیت را به روز رسانی کنیم.

دریافت مقدار قبلی از تابع تنظیم کننده

در زمان تنظیم یک مقدار جدید، ممکن است نیاز داشته باشیم به مقدار قبلی آن متغیر در استیت دسترسی داشته باشیم. برای رسیدن به این هدف، می‌توانیم یک تابع را به عنوان پارامتر به تابع setter که از useObserver دریافت می‌کنیم، ارسال کنیم. این تابع مقدار قبلی متغیر را به عنوان ورودی دریافت کرده و مقدار جدید آن متغیر را برای ثبت شدن در استیت بر میگرداند.

در اینجا یک مثال از نحوه استفاده از یک تابع برای دریافت مقدار قبلی متغیر از استیت و تنظیم مقدار جدید آمده است.

import { useObserver } from 'rosma';

export default function Example() {
  const { foo, setFoo } = useObserver('bar');

  return (
    <div>
      <p>Foo: {foo}</p>
      <button
        onClick={() => setFoo((prevFoo) => (prevFoo === 'bar' ? 'baz' : 'bar'))}
      >
        Toggle Foo
      </button>
    </div>
  );
}

import { useObserver } from 'rosma';

type State = {
  foo: 'bar' | 'baz';
};

export default function Example() {
  const { foo, setFoo } = useObserver<State>('bar');

  return (
    <div>
      <p>Foo: {foo}</p>
      <button
        onClick={() => setFoo((prevFoo) => (prevFoo === 'bar' ? 'baz' : 'bar'))}
      >
        Toggle Foo
      </button>
    </div>
  );
}

در این مثال از تابع setFoo برای تنظیم مقدار foo بر اساس مقدار قبلی آن استفاده می‌کنیم. تابع ارسال شده به setFoo مقدار قبلی foo را به عنوان آرگومان دریافت می‌کند و ما می‌توانیم آن را به عنوان prevFoo نامگذاری کنیم. سپس از یک عملگر شرطی برای تغییر مقدار foo بین 'bar' و 'baz' استفاده می‌کنیم.

با استفاده از تابع برای تنظیم مقدار foo، مطمئن می‌شویم که مقدار جدید بر اساس مقدار قبلی تنظیم می‌شود و میتوانیم از مسائلی که ممکن است در تنظیم استیت به صورت async پیش بیاید، جلوگیری کنیم.

تنظیم چند مقدار به صورت همزمان

در برخی موارد، ممکن است لازم باشد که چندین متغیر را به صورت همزمان در استیت مقداردهی کنیم. در چنین حالتی، به جای فراخوانی تابع تنظیم کننده برای هر متغیر به صورت جداگانه، می‌توانیم از تابع set که توسط useObserver برگردانده می‌شود، استفاده کنیم.

در مثال زیر، نحوه تنظیم همزمان چندین مقدار در استیت با استفاده از تابع set نمایش داده شده است:

import { useObserver } from 'rosma';

export function Example() {
  const { firstName, lastName, set } = useObserver('');

  return (
    <div>
      <p>
        Full Name: {firstName} {lastName}
      </p>
      <button onClick={() => set({ firstName: 'John', lastName: 'Doe' })}>
        Set full name
      </button>
    </div>
  );
}

import { useObserver } from 'rosma';

type State = {
  firstName: string;
  lastName: string;
};

export function Example() {
  const { firstName, lastName, set } = useObserver<State>('');

  return (
    <div>
      <p>
        Full Name: {firstName} {lastName}
      </p>
      <button onClick={() => set({ firstName: 'John', lastName: 'Doe' })}>
        Set full name
      </button>
    </div>
  );
}

در این مثال، از تابع set برای تنظیم مقادیر firstName و lastName به صورت همزمان استفاده می‌کنیم. با ارسال یک شی حاوی مقادیر جدید برای هر دو متغیر به تابع set، می‌توانیم آن‌ها را به روز کنیم.

استفاده از تابع set برای تنظیم چندین مقدار حالت به صورت همزمان، باعث جلوگیری از رندر اضافی شده و افزایش خوانایی کد می‌شود.

همانطور که می توانید یک تابع را به یک تنظیم کننده ارسال کنید تا وضعیت را بر اساس مقدار حالت قبلی به روز کند، همچنین می توانید یک تابع را به تابع set ارسال کنید تا چندین مقدار حالت را بر اساس وضعیت فعلی به روز کند.

ارسال یک تابع به set به عنوان پارامتر

همانطور که می‌توانید یک تابع را به یک تنظیم‌کننده ارسال کنید تا وضعیت را بر اساس مقدار قبلی آن متغیر به‌روز کند، می‌توانید یک تابع را به تابع set ارسال کنید تا مقدار چندین متغیر را بر اساس وضعیت فعلی استیت به‌روز کند.

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

در زیر مثالی از ارسال یک تابع به set برای افزایش همزمان مقدار دو متغیر در استیت آورده شده است.

import { useObserver } from 'rosma';

export function Example4() {
  const { num1, num2, set } = useObserver(0);

  return (
    <div>
      <p>num1: {num1}</p>
      <p>num2: {num2}</p>
      <button
        onClick={() =>
          set(({ num1, num2 }) => ({ num1: num1 + 1, num2: num2 + 1 }))
        }
      >
        increment
      </button>
    </div>
  );
}

import { useObserver } from 'rosma';

type State = {
  num1: number;
  num2: number;
};

export function Example4() {
  const { num1, num2, set } = useObserver<State>(0);

  return (
    <div>
      <p>num1: {num1}</p>
      <p>num2: {num2}</p>
      <button
        onClick={() =>
          set(({ num1, num2 }) => ({ num1: num1 + 1, num2: num2 + 1 }))
        }
      >
        increment
      </button>
    </div>
  );
}

در این مثال، از تابع set برای به روز رسانی مقادیر متغیرهای num1 و num2 بر اساس مقادیر فعلی آنها استفاده می‌کنیم. ما یک تابع را ارسال می‌کنیم که شیء استیت فعلی را به عنوان آرگومان دریافت کرده و یک شیء جدید با مقادیر به روز شده برای num1 و num2 را برمی‌گرداند.

استفاده از یک تابع با set می‌تواند زمانی مفید باشد که شما نیاز دارید چندین مقدار استیت را به طور همزمان بر اساس مقادیر فعلی آنها به روز کنید.

کلید واژه ها: useObserver, هوک ری اکت, مقادیر استیت, رندر مجدد, تنظیم کننده, استیت قبلی, فانکشن تنظیم کننده, تنظیم استیت با فانکشن, بروزرسانی استیت, useState