React State Management for Enterprise Applications


توسعه‌دهندگان برنامه‌های React در سطح سازمانی می‌دانند که مدیریت حالت برای تجربه کاربر نهایی منسجم چقدر حیاتی است.

با این حال، کاربر تنها کسی نیست که تحت تأثیر مدیریت دولتی قرار گرفته است. توسعه دهندگان React وضعیت را ایجاد و حفظ می کنند. آنها می خواهند مدیریت دولتی ساده، قابل گسترش و اتمی باشد. React با معرفی هوک ها به این سمت حرکت کرده است.

مشکلات زمانی ممکن است به وجود بیایند که دولت باید بین بسیاری از اجزاء تقسیم شود. مهندسان باید ابزارها و کتابخانه‌هایی را بیابند که مطابق با نیازهایشان باشد، اما در عین حال استانداردهای بالایی را که برای برنامه‌های درجه یک سازمانی مورد نیاز است، برآورده کنند.

در این مقاله، من محبوب‌ترین کتابخانه‌ها را تجزیه و تحلیل و مقایسه می‌کنم و مناسب‌ترین کتابخانه را برای مدیریت دولتی در یک برنامه در سطح سازمانی انتخاب می‌کنم.

قابلیت های داخلی React State Management

React یک ابزار عالی برای ارائه داده در چندین مؤلفه دارد. هدف اولیه از متن نوشته اجتناب از حفاری پایه است. هدف ما دستیابی به ابزاری با کاربری آسان برای مدیریت وضعیت در سناریوهای مختلفی است که احتمالاً در برنامه‌های سازمانی با آن مواجه می‌شویم: به‌روزرسانی‌های مکرر، طراحی‌های مجدد، معرفی ویژگی‌های جدید و غیره.

در حالی که همه اینها از نظر تئوری با Context قابل انجام است، به یک راه حل سفارشی نیاز دارد که برای راه اندازی، پشتیبانی و بهینه سازی به زمان نیاز دارد. تنها مزیت Context این است که به یک کتابخانه شخص ثالث وابسته نیست، اما این نمی تواند بر تلاش برای حفظ این رویکرد سنگینی کند.

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

بررسی کتابخانه های موجود

ده ها ابزار مدیریت دولتی در GitHub وجود دارد (به عنوان مثال، Redux، MobX، آکیتا، پس زدن، و وضعیت). با این حال، در نظر گرفتن هر یک از آنها منجر به تحقیقات و مقایسه های بی پایان می شود. به همین دلیل من انتخاب خود را به سه رقیب اصلی بر اساس آنها محدود کردم محبوبیت، استفاده، و نگهدارنده.

برای اینکه مقایسه صریح باشد، از ویژگی های کیفیت زیر استفاده می کنم:

  • قابلیت استفاده
  • قابلیت نگهداری
  • کارایی
  • آزمایش پذیری
  • مقیاس پذیری (با عملکرد یکسان در حالت های بزرگتر کار می کند)
  • قابلیت اصلاح
  • قابلیت استفاده مجدد
  • اکوسیستم (دارای انواع ابزارهای کمکی برای گسترش عملکرد)
  • انجمن (کاربران زیادی دارد و سوالات آنها در وب پاسخ داده می شود)
  • قابلیت حمل (قابلیت استفاده با کتابخانه ها/فریم ورک هایی غیر از React)

Redux

Redux یک کانتینر دولتی است که در سال 2015 ایجاد شد. به دلیل اینکه:

  • هنگام راه اندازی هیچ جایگزین جدی وجود نداشت.
  • این جدایی بین دولت و اعمال را فراهم کرد.
  • react-redux جادویی اتصال حالت مستقیم را فعال کرد.
  • یکی از خالقان این کتابخانه، توسعه دهنده تحسین شده فیس بوک و عضو اصلی تیم React، Dan Abramov است.

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

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

برای استفاده از Redux با React، باید از طریق این مؤلفه‌ها مشترک به‌روزرسانی‌های فروشگاه شوید react-redux.

مثال Redux API

بخش های اساسی Redux در پایگاه کد که آن را از سایر ابزارها متمایز می کند، برش ها هستند. آنها حاوی تمام منطق اعمال و کاهش دهنده هستند.

CodeSandbox

// slices/counter.js
import { createSlice } from "@reduxjs/toolkit";

export const slice = createSlice({
  name: "counter",
  initialState: {
    value: 0
  },
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    }
  }
});

export const actions = slice.actions;
export const reducer = slice.reducer;


// store.js
import { configureStore } from "@reduxjs/toolkit";
import { reducer as counterReducer } from "./slices/counter";

export default configureStore({
  reducer: {
    counter: counterReducer
  }
});


// index.js
import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import App from './App'
import store from './store'

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)


// App.js
import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { actions } from "./slices/counter";

const App = () => {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div>
      <div>
        <button onClick={() => dispatch(actions.increment())}>Increment</button>
        <span>{count}</span>
        <button onClick={() => dispatch(actions.decrement())}>Decrement</button>
      </div>
    </div>
  );
};

export default App;

ویژگی های کیفیت

  • قابلیت استفاده. Redux با معرفی بسیار ساده شد بسته رسمی جعبه ابزار. شما یک برش (ترکیبی از حالت اولیه، کاهش دهنده ها و اقدامات) ایجاد می کنید، آن را به فروشگاه ارسال می کنید و از طریق قلاب ها به آن در یک جزء دسترسی پیدا می کنید.
  • قابلیت نگهداری. Redux ساده است. برای درک چگونگی بهبود یا تعمیر چیزی نیازی به دانش عمیق نیست.
  • کارایی. تأثیرگذار اصلی عملکرد با Redux، مهندس نرم افزار است. Redux یک ابزار ساده و بدون منطق زیاد است. اگر می بینید که به روز رسانی ایالت کند است، می توانید دنبال کنید دستورالعمل های رسمی تا آنها را سریعتر کند.
  • آزمایش پذیری. Redux از توابع خالص (عملکردها و کاهش دهنده ها) تشکیل شده است که آن را برای آزمایش واحد عالی می کند. نیز فراهم می کند مکانیسم برای نوشتن تست های یکپارچه سازی که در آن فروشگاه، اقدامات و کاهش دهنده ها با هم کار می کنند.
  • مقیاس پذیری. به‌طور پیش‌فرض، Redux دارای یک حالت جهانی است که مقیاس آن را سخت می‌کند. با این حال، یک وجود دارد redux-dynamic-modules کتابخانه ای که امکان ایجاد کاهنده های مدولار و میان افزار را فراهم می کند.
  • قابلیت اصلاح. سفارشی کردن Redux یک امر بی دردسر است زیرا پشتیبانی می کند میان افزار.
  • قابلیت استفاده مجدد. Redux یک چارچوب آگنوستیک است، بنابراین در قابلیت استفاده مجدد بسیار خوب است.
  • زیست بوم. Redux ارائه می دهد یک اکوسیستم غول پیکر افزونه‌ها، کتابخانه‌ها و ابزارهای مفید.
  • انجمن. Redux، قدیمی‌ترین کتابخانه مدیریت دولتی در مقایسه ما، جامعه بزرگی را با پایگاه دانش قابل توجهی جمع آوری کرده است. 30000 (~19000 پاسخ داده شده) سوال با الف وجود دارد redux برچسب زدن سرریز پشته.
  • نبض. Redux به طور منظم به روز شده و نگهداری می شود.

MobX

MobX یک کتابخانه نسبتا قدیمی دیگر با 23000 ستاره در GitHub است. چیزی که آن را از Redux متمایز می کند این است که از پارادایم OOP پیروی می کند و از قابل مشاهده ها استفاده می کند. MobX توسط میشل وست استرات و در حال حاضر توسط گروهی از علاقه مندان به منبع باز با کمک مستقر در بوستون نگهداری می شود. مندیکس.

نمودار مدیریت حالت با استفاده از MobX، از اقدامات، از طریق حالت‌های قابل مشاهده و مقادیر محاسبه‌شده، تا عوارض جانبی را نشان می‌دهد.

در MobX، یک کلاس جاوا اسکریپت با a ایجاد می کنید makeObservable داخل سازنده ای که شماست تماس بگیرید فروشگاه قابل مشاهده (شما می توانید استفاده کنید @observable دکوراتور در صورت داشتن لودر مناسب). سپس خواص (وضعیت) و متدها (اقدامات و مقادیر محاسبه شده) از کلاس. اجزا برای دسترسی به وضعیت، مقادیر محاسبه شده و اقدامات در این ذخیره قابل مشاهده مشترک می شوند.

یکی دیگر از ویژگی های ضروری MobX این است تغییرپذیری. در صورتی که می خواهید از عوارض جانبی جلوگیری کنید، این امکان را می دهد تا وضعیت را بی سر و صدا به روز کنید.

مثال MobX API

یکی از ویژگی های منحصر به فرد MobX این است که شما کلاس های تقریبا خالص ES6 را با تمام جادوی پنهان زیر کاپوت ایجاد می کنید. برای حفظ تمرکز روی منطق، به کد اختصاصی کتابخانه کمتری نیاز دارد.

CodeSandbox

// stores/counter.js
import { makeAutoObservable } from "mobx";

class CounterStore {
  value = 0;

  constructor() {
    makeAutoObservable(this);
  }

  increment() {
    this.value += 1;
  }

  decrement() {
    this.value -= 1;
  }
}

export default CounterStore;


// index.js
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "mobx-react";
import App from "./App";
import CounterStore from "./stores/counter";

ReactDOM.render(
  <Provider counter={new CounterStore()}>
    <App />
  </Provider>,
  document.getElementById("root")
);


// App.js
import React from "react";
import { inject, observer } from "mobx-react";

const App = inject((stores) => ({ counter: stores.counter }))(
  observer(({ counter }) => {
    return (
      <div>
        <div>
          <button onClick={() => counter.increment()}>Increment</button>
          <span>{counter.value}</span>
          <button onClick={() => counter.decrement()}>Decrement</button>
        </div>
      </div>
    );
  })
);

export default App;

ویژگی های کیفیت

  • قابلیت استفاده. یک فروشگاه قابل مشاهده تنها نقطه ورود برای مدیریت دولتی است. استفاده از MobX را ساده می کند زیرا شما تنها جایی برای تغییر دارید.
  • قابلیت نگهداری. این یک نقطه ضعف قابل توجه است. بدون دانش RxJS API، نمی توانید به نتیجه دلخواه برسید. استفاده از MobX در تیمی با صلاحیت ضعیف ممکن است منجر به مشکلات ناسازگاری حالت شود.
  • کارایی. MobX متشکل از فروشگاه های مستقل است و شما را قادر می سازد تا در تنها فروشگاه هایی که نیاز دارید مشترک شوید. بسیار موثر است.
  • آزمایش پذیری. فروشگاه های قابل مشاهده، اشیاء جاوا اسکریپت ساده با قابلیت واکنشی پنهان در داخل هستند. تست کردن مانند سایر کلاس های جاوا اسکریپت است.
  • مقیاس پذیری. فروشگاه های قابل مشاهده به طور منطقی تقسیم می شوند. هیچ مشکلی در مقیاس بندی MobX وجود ندارد.
  • قابلیت اصلاح. MobX اجازه می دهد تا مشاهده پذیرهای سفارشی با رفتارهای اصلاح شده ایجاد کنید. علاوه بر این، مفهومی به نام واکنش ها وجود دارد. عوارض جانبی خودکار مدل واکنش ها. این موارد MobX را بسیار قابل تنظیم می کند.
  • قابلیت استفاده مجدد. MobX نسبت به فریم‌ورک‌ها ناشناس است، بنابراین در قابلیت استفاده مجدد بسیار خوب است.
  • زیست بوم. وجود دارد صدها افزونه برای MobX موجود است.
  • انجمن. MobX طرفداران فداکار زیادی دارد. ~ 1600 (~ 1000 پاسخ داده شده) سوال با این وجود دارد mobx برچسب زدن سرریز پشته.
  • نبض. MobX به طور منظم به روز شده و نگهداری می شود.

پس زدن

پس زدن یک تازه وارد نسبتاً، آخرین زاده فکر تیم React است. ایده اصلی پشت آن پیاده‌سازی ساده ویژگی‌های React از دست رفته مانند وضعیت مشترک و داده‌های مشتق شده است.

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

Recoil بر اساس دو اصطلاح ساخته شده است: اتم و انتخابگر. اتم یک قطعه حالت مشترک است. یک جزء می تواند برای دریافت/تنظیم مقدار یک اتم مشترک شود.

نموداری که مدیریت حالت را با Recoil نشان می‌دهد، که نشان می‌دهد چگونه اجزا می‌توانند برای بازیابی یا تنظیم مقدار یک اتم مشترک شوند.

همانطور که در تصویر مشاهده می کنید، تنها مولفه های مشترک شده با تغییر مقدار دوباره ارائه می شوند. این Recoil را بسیار کارآمد می کند.

یکی دیگر از چیزهای خوب Recoil خارج از جعبه است انتخابگر. انتخابگر مقداری است که از یک اتم یا انتخابگر دیگر جمع شده است. برای مصرف کنندگان، هیچ تفاوتی بین اتم و انتخابگر وجود ندارد، آنها فقط باید در بخشی از بخش واکنشی مشترک شوند و از آن استفاده کنند.

نمودار استفاده از انتخابگرها در Recoil، ارتباط آنها با اتم ها و تغییرات ناشی از مقادیر مختلف را نشان می دهد.

هر زمان که یک اتم/انتخابگر تغییر می کند، انتخابگرهایی که از آن استفاده می کنند (یعنی مشترک آن هستند) دوباره ارزیابی می شوند.

Recoil API مثال

کد Recoil بسیار متفاوت از رقبای خود است. این مبتنی بر قلاب های React است و بیشتر بر ساختار حالت تمرکز دارد تا جهش این حالت.

CodeSandbox

// atoms/counter.js
import { atom } from "recoil";

const counterAtom = atom({
  key: "counter",
  default: 0
});

export default counterAtom;


// index.js
import React from "react";
import ReactDOM from "react-dom";
import { RecoilRoot } from "recoil";
import App from "./App";

ReactDOM.render(
  <RecoilRoot>
    <App />
  </RecoilRoot>,
  document.getElementById("root")
);


// App.js
import React from "react";
import { useRecoilState } from "recoil";
import counterAtom from "./atoms/counter";

const App = () => {
  const [count, setCount] = useRecoilState(counterAtom);

  return (
    <div>
      <div>
        <button onClick={() => setCount(count + 1)}>Increment</button>
        <span>{count}</span>
        <button onClick={() => setCount(count - 1)}>Decrement</button>
      </div>
    </div>
  );
};

export default App;

ویژگی های کیفیت

  • قابلیت استفاده. پس زدن یکی از ساده ترین ابزارها برای استفاده است زیرا مانند آن عمل می کند useState در React
  • قابلیت نگهداری. تنها کاری که باید در Recoil انجام دهید این است که انتخابگرها و قلاب ها را در داخل قطعات نگهداری کنید – ارزش بیشتر، دیگ بخار کمتر.
  • کارایی. Recoil یک درخت حالت خارج از React می سازد. درخت حالت به شما امکان می دهد چیزهایی را که نیاز دارید به دست آورید و به آنها گوش دهید، نه تغییرات کل درخت. همچنین زیر کاپوت به خوبی بهینه شده است.
  • آزمایش پذیری. پس زدن فراهم می کند یک مکانیسم برای آزمایش اتم ها و انتخابگرهای آن.
  • مقیاس پذیری. حالتی که به چندین قطعه مستقل تقسیم می شود، آن را به بازیکن خوبی در مقیاس پذیری تبدیل می کند.
  • قابلیت اصلاح. Recoil تنها مسئول ذخیره مقادیر و تجمیع آنها است. هیچ جریان داده ای ندارد بنابراین می توان آن را به راحتی سفارشی کرد.
  • قابلیت استفاده مجدد. Recoil به React متکی است. نمی توان آن را در جای دیگری استفاده مجدد کرد.
  • زیست بوم. در حال حاضر هیچ اکوسیستمی برای Recoil وجود ندارد.
  • انجمن. Recoil برای داشتن یک جامعه بزرگ بسیار تازه است. ~70 سوال با وجود دارد recoiljs برچسب زدن سرریز پشته.
  • نبض. Recoil به ندرت به روز می شود (شش ماه بین دو به روز رسانی اخیر آن سپری شده است). همچنین مشکلات باز زیادی در GitHub دارد.

وقتی صحبت از برنامه‌های درجه یک سازمانی می‌شود، این کتابخانه‌های مدیریت دولتی جهانی React چگونه جمع می‌شوند؟

پس زدن جوان و تازه است، اما در حال حاضر نه جامعه و نه اکوسیستم دارد. اگرچه فیس بوک روی آن کار می کند و API امیدوارکننده به نظر می رسد، یک برنامه بزرگ React نمی تواند به کتابخانه ای با پشتیبانی ضعیف جامعه تکیه کند. علاوه بر این، آزمایشی است، و آن را حتی ناامن تر می کند. مطمئناً امروزه گزینه خوبی برای برنامه های سازمانی React نیست، اما ارزش آن را دارد که به آن توجه کنید.

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

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

با در نظر گرفتن هر مزایا و معایبی و با در نظر گرفتن تجربه شخصی خود، Redux را به عنوان بهترین گزینه برای برنامه های React در سطح سازمانی توصیه می کنم.



منبع

Matthew Newman

Matthew Newman Matthew has over 15 years of experience in database management and software development, with a strong focus on full-stack web applications. He specializes in Django and Vue.js with expertise deploying to both server and serverless environments on AWS. He also works with relational databases and large datasets
[ Back To Top ]