أفضل أدوات إدارة حالة React لتطبيقات المؤسسة

إدارة حالة React

لطالما كانت إدارة الحالة في React موضوعًا مثيرًا للجدل لسنوات ومع ذلك يبدو أنه لا يتم إيلاء اهتمام كبير للتطبيقات على مستوى المؤسسة ومتطلباتها الخاصة. دعنا نلقي نظرة فاحصة ونقارن بين ثلاثة من أكثر أدوات إدارة الحالة شيوعًا المتاحة اليوم.

يعرف مطورو تطبيقات React على مستوى المؤسسة مدى أهمية إدارة الحالة لتجربة مستخدم نهائي متماسكة.

ومع ذلك فإن المستخدم ليس هو الوحيد الذي يتأثر بإدارة الدولة. يقوم مطورو React بإنشاء الحالة والحفاظ عليها. يريدون أن تكون إدارة الدولة بسيطة وقابلة للتمديد وذرية. تحركت React في هذا الاتجاه عن طريق إدخال الخطافات.

قد تنشأ المشاكل عندما ينبغي تقاسم الدولة بين العديد من المكونات. يتعين على المهندسين العثور على الأدوات والمكتبات التي تناسب احتياجاتهم ، ولكن في نفس الوقت تفي بالمعايير العالية اللازمة للتطبيقات على مستوى المؤسسات.

في هذه المقالة سأقوم بتحليل ومقارنة المكتبات الأكثر شيوعًا واختيار أنسبها لإدارة الحالة في تطبيق على مستوى المؤسسة.

أفضل أدوات إدارة حالة التفاعل (React state management) لتطبيقات المؤسسة

قدرات إدارة حالة React المضمنة

تمتلك React أداة ممتازة لتوفير البيانات عبر مكونات متعددة. الهدف الأساسي للسياق هو تجنب الحفر الداعم. هدفنا هو الحصول على أداة سهلة الاستخدام لإدارة الحالة في سيناريوهات مختلفة من المحتمل مواجهتها في تطبيقات المؤسسة: التحديثات المتكررة وإعادة التصميمات وإدخال ميزات جديدة وما إلى ذلك.

في حين أن كل هذا يمكن إجراؤه نظريًا باستخدام السياق إلا أنه يتطلب حلاً مخصصًا يتطلب وقتًا للإعداد والدعم والتحسين. الميزة الوحيدة للسياق هي أنه لا يعتمد على مكتبة تابعة لجهة خارجية ولكن هذا لا يمكن أن يفوق الجهد المبذول للحفاظ على هذا النهج.

بالإضافة إلى ذلك ذكر سيباستيان ماركاج عضو فريق React أن واجهة برمجة التطبيقات للسياق الجديدة لم يتم إنشاؤها وتحسينها لتحديثات الترددات العالية بل للتحديثات منخفضة التردد مثل تحديثات السمات وإدارة المصادقة.

فحص المكتبات الموجودة

توجد العشرات من أدوات إدارة الدولة على GitHub على سبيل المثال ( Redux و MobX و Akita و Recoil و Zustand). ومع ذلك فإن أخذ كل منهم في الاعتبار سيؤدي إلى أبحاث ومقارنات لا نهاية لها. هذا هو السبب في تضييق اختياري على المنافسين الثلاثة الرئيسيين بناءً على شعبيتهم واستخدامهم والمشرف عليهم.

لتوضيح المقارنة سأستخدم سمات الجودة التالية:

  • سهولة الاستخدام
  • قابلية الصيانة
  • قابلية الاختبار
  • الأداء
  • قابلية التوسع (تعمل بنفس الأداء في الولايات الأكبر)
  • قابلية التعديل
  • إعادة الاستخدام
  • النظام البيئي (يحتوي على مجموعة متنوعة من الأدوات المساعدة لتوسيع الوظيفة)
  • المجتمع (لديه الكثير من المستخدمين ويتم الرد على أسئلتهم على الويب)
  • قابلية النقل (يمكن استخدامها مع مكتبات / أطر عمل أخرى غير React)

Redux

Redux عبارة عن حاوية تابعة للدولة تم إنشاؤها في عام 2015. وقد أصبحت ذات شعبية كبيرة للأسباب التالية:

  • لم يكن هناك بديل جدي عندما تم إطلاقه.
  • قدمت الفصل بين الدولة والأفعال.
  • تمكن سحر رد الفعل والإحياء من اتصال الحالة المباشر.
  • المؤسس المشارك للمكتبة هو مطور Facebook المشهور وعضو فريق React الأساسي Dan Abramov.
React state management | Redux

لديك متجر عالمي حيث توجد بياناتك. كلما احتجت إلى تحديث المتجر فأنت ترسل إجراءً يذهب إلى المخفض. اعتمادًا على نوع الإجراء يقوم المخفض بتحديث الحالة بطريقة غير قابلة للتغيير.

لاستخدام Redux مع React ستحتاج إلى اشتراك المكونات في تحديثات المتجر عبر react-redux.

مثال على واجهة برمجة تطبيقات Redux

الأجزاء الأساسية من Redux في قاعدة الكود التي تميزها عن الأدوات الأخرى هي الشرائح. أنها تحتوي على كل منطق الأفعال والمخفضات.

// 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

  •     سهولة الاستخدام(usability). أصبح Redux بسيطًا للغاية مع تقديم حزمة مجموعة الأدوات الرسمية. تقوم بإنشاء شريحة (مجموعة من الحالة الأولية والمخفضات والإجراءات) وتمريرها إلى المخزن والوصول إليها في مكون عبر خطافات.
  •     قابلية الصيانة. Redux بسيط. لا يتطلب الأمر معرفة عميقة لفهم كيفية تحسين أو إصلاح شيء ما.
  •     قابلية الاختبار. يتكون Redux من وظائف خالصة (إجراءات ومخفضات) مما يجعلها رائعة لاختبار الوحدة. كما يوفر آلية لكتابة اختبارات التكامل حيث يعمل المتجر والإجراءات والمخفضات معًا.
  •     أداء. المؤثر الأساسي في الأداء مع Redux هو مهندس البرمجيات. Redux هي أداة مباشرة بدون الكثير من المنطق. إذا رأيت أن تحديثات الحالة بطيئة فيمكنك اتباع الإرشادات الرسمية لجعلها أسرع.
  •     قابلية التوسع. بشكل افتراضي لدى Redux حالة عالمية واحدة مما يجعل من الصعب توسيع نطاقها. ومع ذلك هناك مكتبة للوحدات النمطية للإعادة الديناميكية التي تتيح إنشاء مخفضات معيارية وبرمجيات وسيطة.
  •     قابلية التعديل. يعد تخصيص Redux أمرًا سهلاً لأنه يدعم البرامج الوسيطة.
  •     إعادة الاستخدام. يعد Redux حياديًا للإطار لذا فهو جيد جدًا في إعادة الاستخدام.
  •     النظام البيئي. يقدم Redux نظامًا بيئيًا عملاقًا من الوظائف الإضافية والمكتبات والأدوات المفيدة.
  •     تواصل اجتماعي. لقد جمعت Redux أقدم مكتبة إدارة حكومية في المقارنة التي أجريناها مجتمعًا كبيرًا بقاعدة معرفية كبيرة. هناك حوالي 30000 (تمت الإجابة على 19000 تقريبًا) سؤال مع علامة إعادة على Stack Overflow.
  •     نبض. يتم تحديث Redux وصيانته بانتظام.

MobX

MobX هي مكتبة أخرى قديمة نسبيًا بها 23000 نجمة على GitHub. ما يميزه عن Redux هو أنه يتبع نموذج OOP ويستخدم ما يمكن ملاحظته. تم إنشاء MobX بواسطة Michel Weststrate ويتم صيانته حاليًا بواسطة مجموعة من المتحمسين للبرامج مفتوحة المصدر بمساعدة Mendix ومقرها بوسطن.

React state management | MobX

في MobX يمكنك إنشاء فئة JavaScript باستدعاء makeObservable داخل المُنشئ الذي يُعد متجرك الذي يمكن ملاحظته (يمكنك استخدام مصمم الديكورobservable إذا كان لديك المُحمل المناسب). ثم تقوم بتعريف خصائص (الحالة) والطرق (الإجراءات والقيم المحسوبة) للفئة. تشترك المكونات في هذا المتجر الذي يمكن ملاحظته للوصول إلى الحالة والقيم المحسوبة والإجراءات.

ميزة أخرى أساسية في MobX هي قابلية التغيير. يسمح بتحديث الحالة بصمت في حالة رغبتك في تجنب الآثار الجانبية.

مثال على MobX API

ميزة فريدة من نوعها في MobX هي أنك تقوم بإنشاء فئات ES6 نقية تقريبًا مع إخفاء كل السحر تحت غطاء المحرك. يتطلب رمزًا أقل خاصًا بالمكتبة للحفاظ على التركيز على المنطق.

// 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;

أهم اتجاهات JavaScript (JS) في عام 2021

Recoil

Recoil هو وافد جديد نسبيًا وهو أحدث من بنات أفكار فريق React. الفكرة الأساسية وراء ذلك هي تنفيذ بسيط لميزات React المفقودة مثل الحالة المشتركة والبيانات المشتقة.

قد تتساءل عن سبب مراجعة مكتبة تجريبية للمشروعات على مستوى المؤسسة. بادئ ذي بدء يعد Recoil أحد أكثر الموضوعات التي تمت مناقشتها في مجتمع React في الوقت الحالي. ثانيًا Recoil مدعوم من Facebook ويستخدم بالفعل في بعض تطبيقاته مما يعني أنه سيصبح إصدارًا مستقرًا في مرحلة ما. أخيرًا إنها طريقة جديدة تمامًا لمشاركة الحالة في React وأنا متأكد من أنه حتى إذا تم إهمال Recoil فستكون هناك أداة أخرى تتبع نفس المسار.

تم بناء الارتداد فوق فترتين: الذرة والمحدد. الذرة هي قطعة دولة مشتركة. يمكن للمكون الاشتراك في الذرة للحصول على / تعيين قيمتها.

React state management | Recoil

كما ترى في الصورة يتم إعادة عرض المكونات المشتركة فقط عند تغيير القيمة. إنه يجعل الارتداد مؤدٍ للغاية.

شيء آخر رائع لدى Recoil خارج الصندوق هو المحدد. المحدد هو قيمة مجمعة من ذرة أو محدد آخر. بالنسبة للمستهلكين لا يوجد فرق بين الذرة والمحدد فهم يحتاجون فقط إلى الاشتراك في بعض الأجزاء التفاعلية واستخدامها.

أفضل أدوات إدارة حالة التفاعل التطبيقات المؤسسة

عندما يتم تغيير الذرة / المحدد يتم إعادة تقييم المحددات التي تستخدمها (على سبيل المثال الاشتراك فيها).

مثال على Recoil API

يختلف كود Recoil كثيرًا عن منافسيه. يعتمد على React hooks ويركز بشكل أكبر على بنية الحالة أكثر من التركيز على تغيير هذه الحالة.

// 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;

علامات جودة Recoil

  • سهولة الاستخدام. يعد Recoil أحد أسهل الأدوات للاستخدام لأنه يعمل مثل useState في React.
  • قابلية الصيانة. كل ما عليك القيام به في Recoil هو الحفاظ على المحددات والخطافات داخل المكونات – قيمة أكبر وأقل نموذجية.
  • قابلية الاختبار. يوفر الارتداد آلية لاختبار ذراته ومحدداته.
  • أداء. يقوم Recoil ببناء شجرة حالة خارج React. تمكنك شجرة الحالة من الحصول على الأشياء التي تحتاجها والاستماع إليها وليس تغييرات الشجرة بأكملها. كما أنها مُحسَّنة جيدًا تحت الغطاء.
  • قابلية التوسع. إن الحالة التي تنقسم إلى عدة أجزاء مستقلة تجعلها لاعبًا جيدًا في قابلية التوسع.
  • قابلية التعديل. الارتداد مسؤول فقط عن تخزين القيم وتجميعاتها. لا يوجد به تدفق بيانات لذلك يمكن تخصيصه بسهولة.
  • إعادة الاستخدام. يعتمد الارتداد على React. لا يمكن إعادة استخدامها في أي مكان آخر.
  • النظام البيئي. لا يوجد نظام بيئي للارتداد في الوقت الحالي.
  • تواصل اجتماعي. نكص جديد جدا ليكون لديك مجتمع كبير. هناك 70 سؤالًا تقريبًا مع علامة recoiljs على Stack Overflow.
  • نبض. يتم تحديث Recoil بشكل غير متكرر (مرت ستة أشهر بين آخر تحديثين له). كما أن لديها الكثير من المشكلات المفتوحة على GitHub.

اختيار أداة إدارة حالة React الصحيحة

كيف تتراكم مكتبات إدارة الحالة العالمية في React عندما يتعلق الأمر بالتطبيقات على مستوى المؤسسة؟

نكص هو شاب وطازج ولكن ليس له مجتمع أو نظام بيئي في الوقت الحالي. على الرغم من أن Facebook يعمل عليها ويبدو أن واجهة برمجة التطبيقات واعدة ، لا يمكن لتطبيق React الضخم الاعتماد على مكتبة ذات دعم مجتمعي ضعيف. بالإضافة إلى ذلك ، فهو تجريبي ، مما يجعله أكثر خطورة. إنه بالتأكيد ليس خيارًا جيدًا لتطبيقات React للمؤسسات اليوم ولكن الأمر يستحق مراقبته.

لا يشارك MobX و Redux أيًا من هذه المشكلات ويستخدمها معظم اللاعبين الكبار في السوق. ما يجعلهم مختلفين عن بعضهم البعض هو منحنى التعلم. يتطلب MobX فهمًا أساسيًا للبرمجة التفاعلية. إذا لم يكن المهندسون المشاركون في المشروع ماهرين بما يكفي فقد ينتهي الأمر بالتطبيق مع تناقضات التعليمات البرمجية ومشكلات في الأداء وزيادة وقت التطوير. MobX مقبول وسوف يلبي احتياجاتك إذا كان فريقك على علم بفاعلية.

لدى Redux بعض المشكلات أيضًا خاصة فيما يتعلق بقابلية التوسع والأداء. ومع ذلك على عكس MobX هناك حلول مجربة لهذه المشاكل.

مع الأخذ في الاعتبار كل ميزة وعيوب ومراعاة تجربتي الشخصية أوصي بـ Redux كأفضل خيار لتطبيقات React على مستوى المؤسسة.

كيف تقرأ مكتبات js مفتوحة المصدر!

منشور ذات صلة
أهم اتجاهات JavaScript 13 Minutes

أهم اتجاهات JavaScript (JS) في عام 2021

آيات عامر

قدم React بعض الميزات التجريبية مثل (concurrency) و(zero-size server ). حاليا، هذه التقنيات قيد التطوير، فيمكنك استكشاف هذه الميزات لأنها قد تصبح علامة فارقة كبيرة لاتجاهات JavaScript.

Node.js 10 Minutes

لماذا أستخدم Node.js؟

جاسم ناظري

الفكرة الرئيسية لـ Node.js: استخدام الإدخال / الإخراج غير المحظور والمدفوع بالأحداث لتبقى خفيفة الوزن وفعالة في مواجهة تطبيقات الوقت الفعلي كثيفة البيانات التي تعمل عبر الأجهزة الموزعة.

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

السلة