Lit and State Management با Zustand

Summarize this content to 400 words in Persian Lang

در ابتدا در وبلاگ من ارسال شده است.

من با بسیاری از توسعه دهندگان روبرو شدم که فکر می کنند اجزای وب برای چیزهای بی اهمیتی مانند دکمه ها و اجزای ورودی هستند. واقعیت این است که شما می توانید یک برنامه کامل با اجزای وب بسازید. یکی از مهم‌ترین بخش‌های رابط کاربری یک برنامه، مدیریت حالت است. بسیاری از ابزارهای مدیریت حالت وجود دارد، مانند redux و mobx، که با اجزای وب کاملاً خوب کار می کنند. اگرچه این ابزارها کمی دست و پا گیر هستند و بسیاری از توسعه دهندگان راه حل های ساده تری را برای برنامه های کاربردی ساده تر ترجیح می دهند. Zustand را وارد کنید، یک ابزار مدیریت دولتی “نیازهای ساده” که در حال پیشرفت در دنیای React است.

من اخیراً در پروژه React که دارم روی آن کار می کنم به Zustand معرفی شدم. به نظرم خیلی تمیز بود بنابراین طبیعتاً من کنجکاو بودم که چگونه از آن با یک برنامه ساخته شده با اجزای Lit و وب استفاده کنید. من جدیداً این امکان وجود داشت زیرا اسناد Zustand دارای بخش “استفاده از Zustand بدون React” است. اما من مطلقاً هیچ منبعی در مورد نحوه استفاده از آن با Lit پیدا نکردم. بنابراین تصمیم گرفتم با یک برنامه Stackblitz todo آزمایش کنم. خیلی به من خوش گذشت! از آنجایی که هیچ منبعی در آنجا پیدا نکردم، تصمیم گرفتم که این موضوع خوبی برای وبلاگ باشد.

پایین آوردن اصول اولیه

اولین چیزی که باید در مورد استفاده از Zustand در خارج از React بدانید این است که به جای hook ها، که یک چیز React است، با ابزارهای API آن کار خواهید کرد. اینها هستند:

getState
setState
subscribe
getInitialState

من آن را پیدا کردم getInitialState و subcribe برای کار با Lit حیاتی ترین بود. من یک برنامه آزمایشی اولیه را جمع آوری کرده ام که نحوه کار با Lit و Zustand را نشان می دهد.

این برنامه فقط یک فروشگاه و یک جزء Lit دارد. تنها کاری که انجام می دهد این است که خرس ها را بشمار و شمارش را حذف کند. من این را ساختم زیرا می‌خواهم اصول اولیه استفاده از Lit و Zustand را نشان دهم. مهمترین چیزی که در این برنامه باید بدانید خطوط 75-83 my-element.ts، سازنده است.

constructor() {
super();

// we need to subscribe to appStore state changes to rerender the UI when state has been updated
appStore.subscribe((state, prevState) => {
// update bears locally
this.bears = state.bears;
});
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در سازنده شما می خواهید با عضویت در فروشگاه خود به آن گوش دهید. از آنجا می خواهید داده ها را در حالت روشن بر اساس تغییرات حالت به روز کنید. در این مثال ما تعداد خرس ها را در Lit به روز می کنیم (this.bears) با شمارش خرس ها در حالت (state.bears) در خطوط 81. ما می خواهیم این کار را انجام دهیم، زیرا با تغییر حالت، باید یک UI جدید با راه اندازی به روز رسانی ارائه دهیم.

نکته بعدی که باید بدانید این است که می خواهیم وضعیت فروشگاه را در یک ویژگی Lit ذخیره کنیم. در مورد من من این را صدا کرده ام appState اینجا و من استفاده کرده ام getInitialState از ابزار Zustand API برای پر کردن آن. به این ترتیب می‌توانیم روش‌هایی را در فروشگاه خود با ارجاع ساده به ما اجرا کنیم appState مثل من با handleAdd روش.

handleAdd() {
this.appState.increasePopulation();
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

اینجا، increasePopulation روشی در فروشگاه است که مستقیماً از Zustand Docs گرفته شده است. در مورد خود فروشگاه، ما نیازی به انجام کار خاصی برای Lit در اینجا نداریم. این را همانطور که Zustand را در یک برنامه جاوا اسکریپت وانیلی مطابق با اسناد Zustand راه اندازی می کنید، تنظیم کنید.

اگر Lit را می دانید، همه چیزهای دیگر در این برنامه باید خود توضیحی باشد.

برنامه Todo

برنامه todo من اصولی را که در بالا توضیح دادم می گیرد و کمی به آنها تعمیم می دهد. در این برنامه ما از پتنرهای subscribe و appState که به شما نشان داده ام استفاده می کنیم. و نمونه ای از appState را می توان در آن یافت todo-app.ts در خطوط 59-60.

@property()
todoState: ITodoStore = todoStore.getInitialState();

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در اینجا ما آن را صدا می زنیم todoState. در سازنده، اشتراک ما را نیز خواهید دید.

constructor() {
super();
todoStore.subscribe((state) => {
this.numberOfItems = state.todoList.length;
});
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

اگرچه در این برنامه تعداد موارد انجام کار را با بدست آوردن طول آن پیگیری می کنیم todoList.

اضافه کردن یک todo

مسئولیت اضافه کردن کارها توسط سازمان انجام می شود todo-input جزء. این جزء از addTodo روش در فروشگاه برای اضافه کردن یک کار. در برنامه ما یک todo با یک شی نشان داده می شود که دارای دو ویژگی، مقدار و علامت گذاری شده است. آنها خود توضیحی هستند. برای اضافه کردن TODO ما به فروشگاه خود مراجعه می کنیم. کد به نظر می رسد:

addTodo: (newTodo) => set(state => ({ todoList: […state.todoList, newTodo] })),

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در خط 20 از store/todo.ts. اضافه کردن todo بیشتر موارد استاندارد Zustand است. ما استفاده می کنیم set، که به ما حالت می دهد و سپس حالت جدید را برمی گردانیم todoList با گسترش در وضعیت فعلی + newTodo.

وضعیت به روز رسانی

جایی که همه چیز جالب می شود نحوه به روز رسانی وضعیت است. نمونه ای از وضعیت به روز رسانی، به روز رسانی وضعیت بررسی شده یک todo است. من ترجیح دادم از lodash برای این کار استفاده کنم. پس بیایید نگاه کنیم todoToggle روش در خط 26 برای درک چگونگی دستیابی به این:

todoToggle: (index) => set((state) => lodashSet(state, `todoList[${index}].checked`, !state.todoList[index].checked)),

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

یک بار دیگر در حال استفاده هستیم set. اما این بار هم داریم lodashSet که یک شی، یک مسیر به چیزی که می خواهید تنظیم کنید و یک مقدار می گیرد. در مورد ما وضعیت، یک مسیر به ویژگی بررسی شده، و مقداری که برعکس آخرین حالت بررسی شده برای یک افکت جابجایی باشد، می دهیم. سپس شیء حالت جدید را برمی گردانیم.

اما مشکلی وجود دارد، ما وضعیت را به روز کرده ایم و لیت از آن اطلاعی ندارد. وضعیت به‌روزرسانی شده است، اما وقتی این کار را انجام می‌دهیم، باید به Lit بگوییم که رابط کاربری را به‌روزرسانی کند، زیرا وضعیت متفاوت است. با استفاده از آن می توانید این کار را انجام دهید requestUpdate. به خطوط 87-90 اینچ برگردید todo-list.ts.

handleChecked(index: number) {
this.todoState.todoToggle(index);
this.requestUpdate();
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

وقتی زنگ میزنیم todoToggle ما همچنین باید درخواست به‌روزرسانی در Lit کنیم تا رابط کاربری را دوباره ارائه کنیم. همین امر برای removeTodo که از lodash استفاده می کند pullAt برای حذف یک todo در آرایه todoList.

این در مورد آن مردمی. امیدوارم با Lit و Zustand چیزی جالب تر از برنامه Todo من بسازید. در اینجا برنامه Todo برای مرجع است:

constructor() {
  super();

  // we need to subscribe to appStore state changes to rerender the UI when state has been updated
  appStore.subscribe((state, prevState) => {
    // update bears locally
    this.bears = state.bears;
  });
}

handleAdd() {
  this.appState.increasePopulation();
}

@property()
todoState: ITodoStore = todoStore.getInitialState();

constructor() {
  super();
  todoStore.subscribe((state) => {
    this.numberOfItems = state.todoList.length;
  });
}

addTodo: (newTodo) => set(state => ({ todoList: [...state.todoList, newTodo] })),

todoToggle: (index) => set((state) => lodashSet(state, `todoList[${index}].checked`, !state.todoList[index].checked)),

handleChecked(index: number) {
  this.todoState.todoToggle(index);
  this.requestUpdate();
}