State Normalization در فرانت‌اند چیست؟

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

اینجاست که مفهوم State Normalization یا نرمال‌سازی State وارد میدان می‌شود.

State Normalization چیست؟

نرمال‌سازی State به فرآیندی گفته می‌شود که در آن داده‌ها را به شکلی سازمان‌دهی می‌کنیم که دسترسی، بروزرسانی و مدیریت آن‌ها سریع‌تر و ساده‌تر باشد.

به جای ذخیره داده‌ها در آرایه‌های بزرگ و تو در تو، آن‌ها را به ساختاری مشابه پایگاه داده تبدیل می‌کنیم.

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

const users = [
 { id: 1, name: "Ali" },
 { id: 2, name: "Sara" },
 { id: 3, name: "Reza" } 
];

برای پیدا کردن یک کاربر خاص باید از متد find استفاده کنیم:

users.find(user => user.id === 2);

در این حالت جاوااسکریپت باید عناصر آرایه را یکی‌یکی بررسی کند تا کاربر موردنظر پیدا شود.

آیا میدانید مدرسه پرنیان، کلاس آموزش طراحی سایت حرفه ای بصورت حضوری و مجازی برگزار میکند؟

روش حرفه‌ای‌تر

در معماری نرمال‌شده، داده‌ها به شکل زیر ذخیره می‌شوند:

const users = {
 1: { id: 1, name: "Ali" },
 2: { id: 2, name: "Sara" },
 3: { id: 3, name: "Reza" }
 };

اکنون برای دسترسی به کاربر موردنظر کافی است بنویسیم:

users[2];

در این روش دسترسی مستقیم انجام می‌شود و نیازی به پیمایش کل آرایه وجود ندارد.

چرا State Normalization اهمیت دارد؟

در پروژه‌های واقعی ممکن است هزاران کاربر، محصول، سفارش یا مقاله در حافظه مرورگر نگهداری شوند. اگر هر بار مجبور باشید کل آرایه را جستجو کنید، عملکرد برنامه به مرور کاهش پیدا می‌کند.

نرمال‌سازی State مزایای زیر را به همراه دارد:

1. افزایش سرعت دسترسی به داده‌ها

دسترسی مستقیم به داده‌ها بسیار سریع‌تر از جستجو در آرایه‌ها است.

2. بروزرسانی آسان‌تر

فرض کنید بخواهید اطلاعات یک کاربر را تغییر دهید:

users[2].name = "Sarah";

این کار بسیار ساده‌تر از جستجو در آرایه و پیدا کردن آیتم موردنظر است.

3. جلوگیری از داده‌های تکراری

در پروژه‌های بزرگ ممکن است یک داده در چند بخش مختلف استفاده شود. نرمال‌سازی کمک می‌کند تنها یک نسخه از هر داده داشته باشید.

4. نگهداری راحت‌تر پروژه

هرچه ساختار داده‌ها منظم‌تر باشد، توسعه و دیباگ کردن برنامه آسان‌تر خواهد بود.