Immutable.js أمر مخيف. إليك كيفية البدء.

تسمع أنه يجب عليك استخدام غير قابل للتغيير. أنت تعلم أنه يجب عليك ذلك ، لكنك لست متأكدًا تمامًا من السبب. وعندما تذهب إلى المستندات ، يبدو المقتطف الأول من الكود كما يلي:

identity(value: T): T

تعتقد: لا ... ربما في وقت آخر.

إذن ، إليك مقدمة بسيطة وسريعة لتبدأ في استخدام غير قابل للتغيير. لن تندم:

في Pilcro ، قدمنا ​​خاصية ثابتة في تطبيقاتنا منذ حوالي 12 شهرًا. لقد كان أحد أفضل القرارات التي اتخذناها. أصبحت تطبيقاتنا الآن أكثر قابلية للقراءة وقوة وخالية من الأخطاء ويمكن التنبؤ بها.

أساسيات

تحويل إلى ثابت

في JavaScript العادي ، نعرف نوعين شائعين من البيانات: Object{} و Array[] .

لترجمة هذه إلى غير قابلة للتغيير:

  • موضوع {}تصبح خريطةMap({})
  • صفيف[] يصبح قائمةList([])

لتحويل جافا سكريبت العادي إلى غير قابل للتغيير، يمكننا استخدام الخريطة ، قائمة، أو fromJS الوظائف التي ثابتة على ما يلي:

import { Map, List, fromJS } from 'immutable';
// Normal Javascript
const person = { name: 'Will', pets: ['cat', 'dog']};
// To create the equivalent in Immutable:
const immutablePerson = Map({ name: 'Will', pets: List(['cat', 'dog'])});
// Or ...
const immutablePerson = fromJS(person);

fromJSهي وظيفة مفيدة تقوم بتحويل البيانات المتداخلة إلى غير قابلة للتغيير. يخلق Mapsوفي Listsالتحويل.

التحويل من غير قابل للتغيير إلى JavaScript عادي

من السهل جدًا استعادة بياناتك من ثابت إلى جافا سكريبت قديم. أنت فقط تستدعي .toJS()الطريقة على الكائن الثابت الخاص بك.

import { Map } from 'immutable';
const immutablePerson = Map({ name: 'Will' });const person = immutablePerson.toJS();
console.log(person); // prints { name: 'Will' };
Keynote: يجب اعتبار هياكل البيانات على أنها إما جافا سكريبت عادي أو غير قابلة للتغيير.

ابدأ في استخدام ثابت

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

1. الحصول على قيمة متداخلة من كائن دون التحقق من وجوده

أولاً في JavaScript العادي:

const data = { my: { nested: { name: 'Will' } } };
const goodName = data.my.nested.name;console.log(goodName); // prints Will
const badName = data.my.lovely.name;// throws error: 'Cannot read name of undefined'

والآن في غير قابل للتغيير:

const data = fromJS({ my: { nested: { name: 'Will' } } });
const goodName = data.getIn(['my', 'nested', 'name']);console.log(goodName); // prints Will
const badName = data.getIn(['my', 'lovely', 'name']);console.log(badName); // prints undefined - no error thrown

في الأمثلة المذكورة أعلاه ، يتسبب رمز JavaScript العادي في حدوث خطأ ، بينما لا يحدث خطأ في الشفرة الثابتة.

هذا لأننا نستخدم getIn()الدالة للحصول على قيمة متداخلة. إذا كان المسار الرئيسي غير موجود (أي أن الكائن غير منظم كما كنت تعتقد) ، فإنه يعود غير محدد بدلاً من إلقاء خطأ.

لا تحتاج إلى التحقق من القيم غير المحددة على طول الهيكل المتداخل كما تفعل في JavaScript العادي:

if (data && data.my && data.my.nested && data.my.nested.name) { ...

هذه الميزة البسيطة تجعل شفرتك أكثر قابلية للقراءة ، وأقل كلمة ، وأكثر قوة.

2. سلاسل التلاعب

أولاً في JavaScript العادي:

const pets = ['cat', 'dog'];pets.push('goldfish');pets.push('tortoise');console.log(pets); // prints ['cat', 'dog', 'goldfish', 'tortoise'];

الآن في غير قابل للتغيير:

const pets = List(['cat', 'dog']);const finalPets = pets.push('goldfish').push('tortoise');
console.log(pets.toJS()); // prints ['cat', 'dog'];
console.log(finalPets.toJS());// prints ['cat', 'dog', 'goldfish', 'tortoise'];

نظرًا List.push()لإرجاع نتيجة العملية ، يمكننا "ربط" العملية التالية بها مباشرةً. في JavaScript العادي ، pushترجع الدالة طول المصفوفة الجديدة.

هذا مثال بسيط جدًا للتسلسل ، لكنه يوضح القوة الحقيقية للثابتة.

هذا يحررك للقيام بجميع أنواع معالجة البيانات بطريقة أكثر فاعلية وأكثر إيجازًا.

Keynote: العمليات على كائن غير قابل للتغيير ترجع نتيجة العملية.

3. البيانات غير القابلة للتغيير

إنه يسمى غير قابل للتغيير ، لذلك نحن بحاجة إلى التحدث عن سبب أهمية ذلك!

لنفترض أنك أنشأت كائنًا غير قابل للتغيير وقمت بتحديثه - باستخدام ثابت ، لا يتم تغيير بنية البيانات الأولية. إنه غير قابل للتغيير. (الأحرف الصغيرة هنا!)

const data = fromJS({ name: 'Will' });const newNameData = data.set('name', 'Susie');
console.log(data.get('name')); // prints 'Will'console.log(newNameData.get('name')); // prints 'Susie'

In this example we can see how the original “data” object is not changed. This means that you will not get any unpredictable behaviour when you update the name to “Susie.”

This simple feature is really powerful, particularly when you are building complex applications. It is the backbone of what Immutable is all about.

Keynote: Operations on an Immutable object do not change the object, but instead create a new object.

Why Immutable is useful

The developers at Facebook sum up the benefits on the homepage of the docs, but it’s quite tricky to read. Here is my take on why you should start using Immutable:

Your data structures change predictably

Because your data structures are immutable, you are in charge of how your data structures are operated upon. In complex web applications, this means you don’t get funny re-rendering issues when you change a bit of data that is being accessed for the UI.

Robust data manipulation

By using Immutable to manipulate data structures, your manipulations themselves are much less error-prone. Immutable does a lot of the hard work for you — it catches errors, offers default values, and builds nested data structures out-of-the-box.

Concise readable code

The functional design of Immutable can be confusing at first, but once you get used to it, function chaining makes your code much shorter and more readable. This is great for teams working on the same code base.

Next steps

منحنى التعلم معقد بلا شك مع ثابت ، لكنه يستحق ذلك حقًا. ابدأ مجرد اللعب.

فيما يلي الكلمات الأساسية التي تم تدوينها أثناء استعراضنا. إذا كان بإمكانك الاحتفاظ بهذه الأشياء في ذهنك ، فسوف تأخذها إلى ثابتة مثل البطة في الماء!

  1. يجب اعتبار هياكل البيانات على أنها إما JavaScript عادي أو غير قابل للتغيير.
  2. العمليات على كائن غير قابل للتغيير ترجع نتيجة العملية.
  3. العمليات على كائن غير قابل للتغيير لا تغير الكائن نفسه ، ولكن بدلاً من ذلك تنشئ كائنًا جديدًا.

حظا طيبا وفقك الله!

إذا كنت تحب هذه القصة ، من فضلك؟ ويرجى مشاركتها مع الآخرين. يرجى أيضًا مراجعة شركتي pilcro.com. Pilcro هو برنامج علامة تجارية لـ G-Suite - للمسوقين ووكالات العلامات التجارية.