معرفی react-jet جایگزین برای دایناسور Redux

در تمام پروژه های که با react انجام داده ام هر بار خواستم با redux آشتی کنم نتونستم. خیلی وقت ها احساس کردم شاید من گارد خاصی به redux دارم بعد از صحبت با خیلی از افراد فعال در این زمینه متوجه شدم خیلی از توسعه دهندگان هم همین احساس را دارند. من اعتقاد دارم کسی که توسعه دهنده react هست باید تسلط کامل به javascript داشته باشد. و معتقد redux با اینکه الحام گرفته از fluع هست و معماری یکسانی دارند برای پروژهای pure javascript فوق العاده هست اما برای پروژه های react چیزی به جز دردسر نیست(تجربه شخصی). من بعد از توسعه دو ماژول به نام jetemit و jetstate برای پروژه های pure javascript متوجه پتانسیل فوق العاده این دو ماژول برای ترکیب و ایجاد ماژولی به نام react-jet برای پروژهای react و react-native شدم به صورت آزمایشی در چند پروژه استفاده کردیم و نتیجه ما بعد از استفاده از react-jet لذت بخش بود بعد از استفاده های خصوص این ماژول را به صورت عمومی در npm و github منتشر کردیم. در این مقاله خواستم این دانش به اشتراک بگذارم شاید برای پروژه های شما هم کاربردی باشد.

ماژول jetemit برای مدیریت رویداد هاست و ماژول jetstate برای مدیریت state ها هست که هر کدام ماژول های سبکی هستند. قبلا مقاله ای در خصوص jetemit در ویرگول نوشتم که میتونید از این لینک مطالعه کنید. اما بریم سراغ react-jet

نحوه استفاده از react-jet

برای نصب از دستور زیر استفاده کنید:

npm install react-jet

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

import { initial } from 'react-jet';

initial([{ name: 'time', defaultValue: 2018 }]);

در این آرایه می توانید همه state های خود را تعریف کنید ما در این مثال یه state تعریف کرده ایم. name به نام state اشاره میکند و defaultValue به مقدار پیش فرض آن که میتواند هر نوع داده ای باشد ویژگی های دیگری هم هستند که می توانید به صورت advance استفاده کنید. مثلا متدی به نام shouldUpdate هست که میتوانید از بروزرسانی state جلوگیری کنید برای مثال ما میخواهیم state time مقادیر زیر 2000 را پذیرش نکند:

...
    defaultValue: 2018,
    shouldUpdate: (prevValue, nextValue) => {
      if (nextValue < 2000) return false;
      else return true;
    }
...

یا مثلا متد های به نام willUpdate وجود دارد که قبل از بروزرسانی state میتوانید کارهای انجام دهید یا متدی به نام didUpdate وجود دارد که میتوانید بعد از بروزرسانی state کار خاصی انجام دهید.

تا این جای مقاله ما بحث تعریف state را داشتیم بریم سراغ اتصال این state ها به component های React:

import React from 'react';
import { connect } from 'react-jet';

function DisplayTime(props) {
  return <div>{props.time}</div>;
}

export default connect(
  DisplayTime,
  ['time']
);

به همین سادگی :) با متدد connect در react-jet میتوانید هر component را به یک یا چند state وصل کنید ما در این کد فقط state مربوط به time را به متد connect معرفی کردیم مزیت معرفی نام state به ما کمک میکند تا component حساس به state های باشند که ما تعریف کرده ایم در این مثال فقط state time باعث دوباره render شدن این component میشود. نکته ای اخر اینکه time به صورت props وارد این کامپوننت میشود.

و اما مرحله اخر، چطور state را تغییر دهید:

import { state } from 'react-jet';
state.time = 2019;

این هم به همین راحتی :) بعد از مقدار دهی جدید time همه component های که با متدد connect نام time به آنها معرفی شده است مقدار جدید را دریافت خواهند کرد.

مقاله اینجا به پایین رسید اما یک متد هم وجود دارد که شاید خیلی کاربردی باشد. گاهی ما لازم داریم خارج از component های react هم متوجه تغییر state بشویم برای این کار کافی هست از روش زیر استفاده کنید:

import { on } from 'react-jet';
on('time', value => console.log(value));

در این کد هر موقع state time تغییر کرد ما در console لاگ میندازیم.

امیدوارم از این مقاله لذت برده باشید

لینک github:

https://github.com/uxitten/react-jet

لینک npm:

https://www.npmjs.com/package/react-jet