بررسی مدیریت دولت در React با استفاده از Jotai: یک راهنمای عملی

مدیریت وضعیت برنامه React خود را با Jotai ارتقا دهید: جایگزین ساده‌تری برای Redux و مناسب برای پروژه‌های کوچکتر!

مدیریت وضعیت در پروژه‌های مقیاس کوچک معمولاً با استفاده از قلاب‌ها و لوازم جانبی React ساده است. با این حال، با رشد برنامه و نیاز به اشتراک گذاری و دسترسی به داده ها در اجزای مختلف، اغلب منجر به حفاری پایه می شود. متأسفانه، حفاری پایه می تواند به سرعت پایگاه کد را به هم ریخته و چالش های مقیاس پذیری را ایجاد کند.

در حالی که Redux یک راه حل مدیریت دولتی عالی ارائه می دهد، API آن می تواند برای پروژه های نسبتا کوچک بسیار زیاد باشد. در مقابل، Jotai، یک کتابخانه مدیریت دولتی حداقلی است که از واحدهای مستقل ایالت ها به نام اتم برای مدیریت حالت استفاده می کند، چالش هایی مانند حفاری پایه را از بین می برد و یک رویکرد مدیریت دولتی ساده تر و مقیاس پذیرتر را امکان پذیر می کند.

Jotai چیست و چگونه کار می کند؟

Jotai یک کتابخانه مدیریت دولتی است که یک راه حل ساده مدیریت دولتی را در مقایسه با جایگزین های پیچیده تر مانند Redux ارائه می دهد. از واحدهای حالت مستقل به نام اتم برای مدیریت حالت در برنامه React استفاده می کند.

در حالت ایده آل، اجزای مختلف در برنامه، با استفاده از یک هوک ارائه شده توسط Jotai به نام useAtom به این اتم ها دسترسی پیدا کرده و به روز می کنند. در اینجا یک مثال ساده از نحوه ایجاد اتم Jotai آورده شده است:

import { atom } from 'jotai';
const countAtom = atom(1);

برای دسترسی و کار با اتم‌ها در Jotai، می‌توانید به سادگی از useAtom hook استفاده کنید که مانند سایر قلاب‌های React، به شما امکان می‌دهد به مقدار یک حالت در یک جزء عملکردی دسترسی داشته باشید و آن را به‌روزرسانی کنید.

در اینجا یک مثال برای نشان دادن کاربرد آن آورده شده است:

import { useAtom } from 'jotai';

const countAtom = atom(1);

function MyComponent() {
  const [count, setCount] = useAtom(countAtom);
  const increment = () => setCount((prevCount) => prevCount + 1);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

در این مثال، از قلاب useAtom برای دسترسی به اتم countAtom و مقدار مرتبط با آن استفاده شده است. تابع setCount برای به روز رسانی مقدار اتم استفاده می شود و هر مؤلفه مرتبط به طور خودکار با مقدار به روز شده مجدداً ارائه می شود.

تنها با فعال کردن مؤلفه‌های آسیب‌دیده، رندرهای غیرضروری در برنامه را کاهش می‌دهد. این رویکرد هدفمند برای ارائه مجدد عملکرد کلی برنامه را افزایش می دهد.

با در نظر گرفتن اصول اولیه، بیایید یک برنامه ساده To-do React بسازیم تا توانایی های مدیریت ایالت Jotai را بهتر درک کنیم.

شما می توانید کد منبع این پروژه را در این مخزن GitHub پیدا کنید.

مدیریت حالت در React با استفاده از Jotai

برای شروع، یک برنامه React ایجاد کنید. از طرف دیگر، می توانید از Vite برای راه اندازی یک پروژه React استفاده کنید. هنگامی که یک برنامه اصلی React را داربست کردید، پیش بروید و Jotai را در برنامه خود نصب کنید.

npm install jotai

در مرحله بعد، برای استفاده از Jotai در برنامه خود، باید کل برنامه خود را با مولفه Provider بپیچید. این مؤلفه حاوی ذخیره‌ای است که به عنوان مرکز مرکزی برای ارائه مقادیر اتم در سراسر برنامه عمل می‌کند.

علاوه بر این، به شما امکان می دهد وضعیت اولیه اتم ها را اعلام کنید. با بسته بندی برنامه خود با ارائه دهنده، همه اجزای برنامه به اتم هایی که تعریف کرده اید دسترسی پیدا می کنند، و سپس می توانند از طریق قلاب useAtom با آنها تعامل داشته باشند و وضعیت را به روز کنند.

import { Provider } from "jotai";

حالا برنامه را مانند شکل زیر در index.js یا main.jsx بپیچید.

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import { Provider } from "jotai";

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Provider>
      <App />
    </Provider>
  </React.StrictMode>,
)

یک فروشگاه داده را پیکربندی کنید

فروشگاه به عنوان یک مخزن مرکزی برای وضعیت برنامه عمل می کند. معمولاً شامل تعریف اتم‌ها، انتخابگرها و سایر توابع مرتبط مورد نیاز برای مدیریت حالت با استفاده از Jotai است.

در این مورد، اتم ها را برای مدیریت لیست موارد برای برنامه To-do مدیریت می کند. در پوشه src، فایل TodoStore.jsx را ایجاد کنید و کد زیر را اضافه کنید.

import { atom } from "jotai";
export const TodosAtom = atom([]);

با ایجاد و صادرات TodosAtom، می‌توانید به راحتی با یکدیگر تعامل داشته باشید و وضعیت to-dos را در اجزای مختلف برنامه به‌روزرسانی کنید.

عملکرد برنامه To-Do را اجرا کنید

اکنون که Jotai را در برنامه React پیکربندی کرده‌اید و یک اتم برای مدیریت وضعیت برنامه ایجاد کرده‌اید، ادامه دهید و یک مؤلفه ساده برای انجام کار ایجاد کنید که قابلیت‌های افزودن، حذف و ویرایش موارد کار را انجام می‌دهد.

یک فایل components/Todo.jsx جدید در دایرکتوری src ایجاد کنید. در این فایل کد زیر را اضافه کنید:

1. ذخیره داده و قلاب useAtom را وارد کنید. وارد کردن React، { useState } از ‘react’;وارد کردن { TodosAtom } از ‘../TodoStore’;وارد کردن { useAtom } از ‘jotai’;
2. کامپوننت عملکردی را ایجاد کرده و عناصر JSX را اضافه کنید. const Todo = () => {   return (    
          setValue(li t on                                                                                 {handleAdd} >Add Todo      

           {todos.map(todo => (          
   •             {todo.text}                                            حذف          

           ))}      

       

     );};صادرات پیش‌فرض Todo; این کامپوننت یک رابط کاربری ساده برای مدیریت لیستی از موارد انجام می دهد.

3. در نهایت، توابع افزودن و حذف کارها را پیاده سازی کنید. const [value, setValue] = useState(”); const [todos, setTodos] = useAtom(TodosAtom); const handleadd = () => {if (value.trim ()! == ”) {settodos (prevTodos => [… prevTodos ، {id: date.now () ، متن: مقدار} ،]) ؛ setValue(”); }   }؛ const handleDelete = id => {    setTodos(prevTodos => prevTodos.filter(todo => todo.id !== id)); };

import React, { useState } from 'react';
import { TodosAtom } from '../TodoStore';
import { useAtom } from 'jotai';

const Todo = () => {
 
  return (
    <div>
      <input
        placeholder="New todo"
        value={value}
        onChange={event => setValue(event.target.value)}
      />
      <button onClick={handleAdd}>Add Todo</button>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>
            {todo.text}
            <button onClick={() => handleDelete(todo.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Todo;

 const [value, setValue] = useState('');
 const [todos, setTodos] = useAtom(TodosAtom);

   const handleAdd = () => {
    if (value.trim() !== '') {
      setTodos(prevTodos => [
        ...prevTodos,
        {
          id: Date.now(),
          text: value
        },
      ]);
      setValue(''); 
    }
   };

  const handleDelete = id => {
    setTodos(prevTodos => prevTodos.filter(todo => todo.id !== id));
  };

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

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

از سوی دیگر، تابع handleDelete وظیفه حذف یک مورد از لیست را بر عهده دارد. با استفاده از روش prevTodos.filter، مورد کار را با استفاده از شناسه مشخص شده از لیست موجود فیلتر می کند. سپس فهرست را با استفاده از تابع setTodos به‌روزرسانی می‌کند – به طور مؤثری مورد مشخص شده برای انجام کار از لیست حذف می‌شود.

استفاده از Jotai برای مدیریت حالت در برنامه های React

این راهنما مقدمه ای برای استفاده از Jotai به عنوان راه حل مدیریت دولتی ارائه کرده است. با این وجود، ویژگی های عالی دیگری مانند توانایی ایجاد اتم های ناهمزمان وجود دارد که به طور خاص برای مدیریت حالت طراحی شده است که شامل عملیات ناهمزمان مانند فراخوانی API است.

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

با استفاده از این ویژگی های مدیریت حالت، می توانید برنامه های React قوی و مقیاس پذیرتری ایجاد کنید.

منبع مقاله