چرا استفاده از Redux را متوقف کردم و شروع به استفاده از Nori-Store کردم

مدیریت ایالتی همیشه سنگ بنای ساخت برنامه های کاربردی وب مدرن بوده است، اما بیایید صادق باشیم—کار با ابزارهایی مانند Redux، MobX یا حتی React Query اغلب ممکن است بیش از حد به نظر برسد. دو سال پیش، متوجه شدم که از دیگ بخار بی پایان و تنظیمات پیچیده ای که این ابزارها نیاز داشتند، ناامید شدم.
اولین چیزی که آزاردهنده بود، انبوه کدهای دیگ بخاری بود که برای شروع کار با ایالتم مجبور شدم بنویسم. ثانیاً، چالش اتصال آن به برنامه وجود داشت – نصب چندین کتابخانه، ارائه یک زمینه، با استفاده از قلاب های مخصوص(مشکل چندان بزرگی نیست)، افزودن اکشن ها و کاهش دهنده ها…

چه چیزی می تواند ساده تر باشد؟
یک کتابخانه برای همه چیز، بدون دیگ بخار برای اجرا، بدون ارائه دهندگان زمینه و بدون قلاب (🙄)

پس از چند آزمایش، یک کتابخانه ساده ایجاد کردم که همانطور که می خواستم کار می کرد.
خب چیه nori-store? این کتابخانه است که به شما امکان می دهد حالت های جداگانه ایجاد کنید. هر ایالت مستقل است و از بقیه اطلاعی ندارد

برای شروع کار با nori-state شما باید آن را نصب کنید و آن را در یک ماژول جداگانه وارد کنید.

npm install nori-store

در مرحله دوم، کتابخانه را وارد کنید و یک حالت ایجاد کنید.

import { NoriState } from "nori-store";

export const UserState = new NoriState({
  id: "unique_id",
  firstName: "John",
  secondName: "Doe",
  age: 28,
});

console.log(UserState.value);
// {
//   id: "unique_id",
//   firstName: "John",
//   secondName: "Doe",
//   age: 28,
// }

خوب، دولت ایجاد شده است. Nori-State متدهای 'setValue' و 'set' را برای تغییر داده های ایالت ارائه می کند.
پس از اصلاح داده ها، باید مشترک تغییرات داده شویم. مشترک تابعی است که با هر بار تغییر وضعیت فعال می شود.

UserState.setValue({ age: 29 });
// Or
UserState.set("age", 29);

const removeSubscriber = UserState.subscribe((state, prevState) => {
  if (state.age === prevState.age) return;
  // React only when the age has been changed
  //
  // Subscriber code...
});

removeSubscriber();

بسیار خوب، من می توانم یک ایالت ایجاد کنم، می توانم در تغییرات داده های ایالت مشترک شوم. خب، بعدش چی؟ چگونه در یک برنامه React کار می کند؟
خوب، در یک برنامه React موجود، فقط باید نصب کنید nori-store و یک فایل با حالت ساده ایجاد کنید که قصد تغییر آن را دارید

// src/store/counterState.ts
import { NoriState } from "nori-store";

export const CounterState = new NoriState({
  counter: 0,
});

در کامپوننت ایجاد شده باید حالت را وارد کنم و از داده ها استفاده کنم.

// src/App.tsx`
import { CounterState } from "./store/counterState";

export default function App() {
  const buttonHandler = () => {
    CounterState.set("counter", CounterState.value.counter + 1);
  };

  return (
    <div>
      <p>Counter: {CounterState.value.counter}p>
      {/* counter is 0 */}
      <button onClick={buttonHandler}>incrementbutton>
    div>
  );
}

در این مورد، من مقدار شمارنده را نشان می‌دهم و داده‌های حالت را با یک کنترل‌کننده دکمه تغییر می‌دهم. داده های ایالت در حال تغییر است، اما فقط مقدار اولیه را نشان می دهد. برای نمایش داده‌های واقعی، باید در حالت عضو شوم و هر بار که داده‌ها تغییر می‌کنند، مؤلفه را دوباره رندر کنم.

// src/App.tsx`
import { useEffect, useState } from "react";
import { CounterState } from "./store/counterState";

export default function App() {
  const [counter, setCounter] = useState(CounterState.value.counter);

  useEffect(() => {
    const deleteSubscriber = CounterState.subscribe((state, prevState) => {
      if (state.counter === prevState.counter) return;
      setCounter(state.counter);
    });

    return deleteSubscriber;
  }, []);

  const buttonHandler = () => {
    CounterState.set("counter", CounterState.value.counter + 1);
  };

  return (
    <div>
      <p>Counter: {counter}p>
      {/* counter is 0 */}
      <button onClick={buttonHandler}>incrementbutton>
    div>
  );
}

مشترکی را اضافه کردم که راه‌اندازی می‌کند useState برای رندر مجدد مؤلفه و نمایش مقدار واقعی شمارنده قلاب کنید.
کد کار می کند، اما کمی حجیم به نظر می رسد. برای رفع آن، باید یک قلاب اضافه کنم که بتواند همه کدهای مشترک را در داخل خود نگه دارد (در نتیجه، بدون قلاب غیرممکن است 😏).

import { useEffect, useState } from "react";
import { NoriState } from "nori-store";
import { GeneralObjectType } from "nori-store/build/types/core/nori-state";

export function useNoriState<T extends GeneralObjectType>(
  state: NoriState<T>,
  ...options: Array<keyof T>
) {
  const [currentState, setCurrentState] = useState(state.value);

  useEffect(() => {
    return state.subscribe((value, prevValue) => {
      const statedHasUpdated = options.some(
        (option) => value[option] !== prevValue[option]
      );
      if (!options.length || (options.length && statedHasUpdated)) {
        setCurrentState(value);
      } else {
        return;
      }
    });
  }, [options, state]);

  return currentState;
}

قلاب جهانی در بالا نشان داده شده است. می توانید هر نمونه NoriState را اضافه کنید و در هر ویژگی داخل آن مشترک شوید.
چگونه کد کامپوننت من را تغییر می دهد؟

// src/App.tsx`
import { CounterState } from "./store/counterState";
import { useNoriState } from "./hooks/useNoriState";

export default function App() {
  const { counter } = useNoriState(CounterState, "counter");

  const buttonHandler = () => {
    CounterState.set("counter", counter + 1);
  };

  return (
    <div>
      <p>Counter: {counter}p>
      {/* counter is 0 */}
      <button onClick={buttonHandler}>incrementbutton>
    div>
  );
}

نتیجه گیری

استفاده می کنم nori-store در پروژه های من به مدت 2 سال این یک رویکرد ساده، کارآمد و انعطاف پذیر برای مدیریت دولتی ارائه می دهد که می تواند در هر پروژه ای کار کند.

برخلاف کتابخانه‌های سنتی، کد دیگ بخار، ارائه‌دهندگان زمینه و پیکربندی‌های پیچیده را حذف می‌کند و برای توسعه‌دهندگانی که به راه‌حل‌های ساده ارزش می‌دهند، ایده‌آل است. فرقی نمی‌کند با React Native، Next.js یا Node.js برنامه بسازید، Nori-Store به‌طور یکپارچه با گردش کار شما سازگار می‌شود. طراحی سبک وزن آن به شما اطمینان می دهد که می توانید بر آنچه واقعاً مهم است تمرکز کنید: ایجاد تجربیات کاربری عالی.

برای اطلاعات بیشتر در مورد nori-store و عملکرد آن صفحه npm را بررسی کنید یا از مخزن GitHub برای مستندات، مثال‌ها و به‌روزرسانی‌ها دیدن کنید.