کتابخانه Zustand در ری اکت ! یک State Management قدرتمند و ساده !

کتابخانه Zustand یک State Management قدرتمند ولی ساده و باحاله که یادگیریش خیلی خیلی آسونه! بر خلاف State Management هایی مثل ریداکس که خیلی پیچیده هستن و یادگیری سختی دارن، کتابخانه Zustand تو کمتر از چند دقیقه کانفیگ میشه و خیلی خیلی سادس 🙂

پس اگه شما هم مثل من با Redux حال نمیکنید و دمبال یک State Management قدرتمند ولی ساده و دوست داشتنی میگردید، کتابخانه Zustand همون چیزیه که دمبالش میگردیم 🙂

بیاید بریم ببینیم کتابخانه Zustand در ری اکت چیست و به چه دردی میخوره …

کتابخانه Zustand چیست ؟

کتابخانه Zustand یک State Management سبک، قدرتمند و ساده برای مدیریت State در کامپوننت های ری اکتی هست.

کار کردن با کتابخانه Zustand در ری اکت خیلی خیلی آسونه و همین باعث شده که با ریداکس و امثال اون خداحافظی کنیم و بریم سراغ Zustand در ریکت 🙂

کتابخانه Zustand یه عالمه هوک کاربردی در اختیار ما گذاشته که باعث شده خیلی بهینه تر و ساده تر بتونیم State های اپیکیشن خودمون رو مدیریت کنیم.

صادقانه بخوام بگم، کتابخانه Zustand ارزش یادگیری داره، اما بیاید یه چندتا آمار باحال درمورد این کتابخانه باهمدیگه بببنیم :

• 2.5 میلیون بار در هفته دانلود میشه و این آمار به سرعت درحال رشده !
  
• مجموعا 118 میلیون بار دانلود شده !
  
• بشدت سبکه ( حجم کل باندل این کتابخانه فقط 1.2 کیلوبایت هست ! )
  
• 40 هزار ستاره تو گیتهاب دریافت کرده !
  

بریم یکم کد بزنیم و ببینیم چطور میشه از کتابخانه Zustand در ری اکت برای مدیریت State استفاده کرد ..

آموزش کتابخانه Zustand در ری اکت

ما میخوایم یک اپیکیشن ری اکتی بسازیم و کتابخانه Zustand رو در اون نصب کنیم، سپس مباحث اولیه Zustand رو باهمدیگه یاد بگیریم و تمرین کنیم.

برای اینکار من یک اپیکیشن ری اکتی به کمک دستور زیر میسازم :

npx create-react-app my-app

اگه با create-react-app حال نمیکنید، پیشنهاد میکنم نصب ری اکت با Vite رو امتحان کنید چون ابزار Vite بشدت سریعه !

حالا که ری اکت رو نصب کردیم، باید کتابخانه Zustand رو نصب کنیم ( یا با npm این کار رو میکنیم یا با yarn ) :

npm install zustand

خب عالیه 🙂

ما تونستیم کتابخانه Zustand در ری اکت رو نصب کنیم، حالا برای بررسی قابلیت ها و ویژگی های کتابخانه Zustand در React من یک Counter ( شمارنده ) میسازم. این Counter شامل 2 دکمه + و – برای کم و زیاد کردن عدد ذخیره شده هست.

میخوام خروجی اینطوری باشه :

برای اینکه کامپوننت بالارو بسازم، از کد زیر استفاده میکنم :

export const Counter = () => {

    return (

        <div>

            <button>+</button>

            {123}

            <button>-</button>

        </div>

    )

}

حالا برای اینکه کامپوننت خودمون رو بتونیم ببینیم، باید تو کامپوننت App فراخوانیش کنیم :

function App() {

 return (

   <div className=&quotApp&quot>

     <header className=&quotApp-header&quot>

        <Counter />

     </header>

   </div>

 );

}

ساخت Store در کتابخانه Zustand برای ذخیره کردن State ها !

اگه با Redux آشنا باشیم، میدونیم که تو State Management ها یک مفهومی داریم به اسم Store که محل ذخیره کردن State های ماست!

در حقیقت Store مثل یک انبار هست که داده های مارو ذخیره میکنه.

برای اینکه تو کتابخانه Zustand یک Store بسازیم باید یک فایل با نام دلخواه ( مثلا Store.js ) ایجاد کنیم و از تیکه کد زیر برای ساخت Store استفاده کنیم :

import {create} from &quotzustand"

export const useCounterStore = create(() => (

   {number: 123}

))

تو تیکه کد بالا من تابع create رو از کتابخانه Zustand فراخوانی کردم که عملیات ساخت Store رو برای من انجام میده.

اسم Store خودم رو useCounterStore گذاشتم و هرچیزی که داخل این Store میخوام ذخیره کنم رو مشخص کردم ( در خط 4 )

من یک number با مقدار پیشفرض 123 داخلش قرار دادم.

حالا چطور میتونیم از این Store استفاده کنیم و مقدار ذخیره شده داخلش رو به کاربر نمایش بدیم ؟

تو تیکه کد زیر من Store خودم رو فراخوانی کردم و خیلی ساده number رو به کاربر نمایش دادم :

import {useCounterStore} from &quot./store"

export const Counter = () => {

    const counterNumber = useCounterStore(state => state.number)

    return (

        <div>

            <button>+</button>

            {counterNumber}

            <button>-</button>

        </div>

    )

}

کد بالا انقدر واضحه که اصلا نیازی به توضیح نداره 🙂 کتابخانه Zustand واقعا ساده و دوست داشتنیه 🙂

تو خط 1 من Store خودم رو فراخوانی کردم. در خط 4 مقدار number رو از داخل Store بیرون کشیدم و داخل یک متغیر با نام counterNumber ریختم.

در نهایت این متغیر رو در خط 8 به کاربر نمایش دادم.

تا به اینجای کار تونستیم یک Store بسازیم و یک State ( که عدد بود ) داخلش ذخیره کنیم و به کاربر نمایش بدیم.

اما ما نیاز داریم این State رو تغییر بدیم و مقدارش رو کم و زیاد کنیم ( زمانیکه روی دکمه + و – کلیک میکنیم )

افزایش شمارنده با کلیک روی دکمه +

تو ادامه مقاله میخوایم برای اپیکیشن خودمون دکمه + ( شمارنده ) و - ( کاهنده ) بسازیم و روش ساخت Async Action رو در کتابخانه Zustand یاد بگیریم . همچنین یادمیگیریم چطور میشه State های مرتبط باهمدیگه رو در فایلهای جدا از هم قرار بدیم. درنهایت به بررسی مزایا و معایب Zustand در ری اکت میپردازیم :)

پس لطفا روی لینک زیر کلیک کنید تا ادامه مقاله رو بصورت رایگان و کامل در فِرانت اِندی بخونیم :

کتابخانه Zustand در React