مدیریت State در Angular توسط ngrx@ - مقدمه

It can be easy — piece of cake if you will

تو این پست میخوام توضیح بدم State و ngrx@ هرکدوم چی هستند و چیکار میکنند.

برای شروع فرض کنید ما در حال طراحی یک اپلیکیشن وب هستیم و قراره یک منو طراحی کنیم. برای اینکه نشون بدیم منو ما باز هست یا بسته نیاز به یک متغییر داریم که این حالت رو برای ما نگهداری کنه. به این متغییر state میگن. در واقع state یک ساختار داده هست که وضعیت کنونی قسمت های مختلف اپلیکیشن مارو نگهداری میکنه. حالا امکان داره این دیتا قسمت های کوچیکی از ui اپلیکیشن شما باشه یا دیتا های بزرگتر که منطق برنامه شما باهاشون در ارتباط هستند.

فریمورک NgRx@

پکیج ngrx/store@ توسط Rob Wormald یکی از اعضای تیم Angular بر اساس Redux با کتابخانه RxJs نوشته شده و در حال حاضر بیش از 150 نفر تو این پروژه مشارکت داشتند و اونو گسترش دادند. این پکیج به شما این اجازه رو میده که داخل Angular اپلیکیشن های Reactive بر اساس Redux Pattern بسازید.توسط ngrx@ ما میتونیم مدیریت بهتری روی state های خودمون داشته باشیم و از ویژگی هایی مثل کنترل Side Effect و Entity Collection و کنترل Route و... استفاده کنیم.

اپلیکیشن های Reactive ؟

همینطور که از اسمش مشخصه رویدادهای مختلفی داخل برنامه ما اتفاق میفته مثل click و ... که اپلیکیشن نسبت به این رویداده ها واکنش نشون میده و ساختار کامپونت های ما رو اساس State های مختلف بروز میکنه.

در مورد Redux Pattern

این پترن توسط شخصی بنام Dan Abramov یکی از اعضای تیم React.js برای حل مشکلاتی که با State داشتن بوجود امد.

چه مشکلاتی؟

معماری React.js بصورت Flux طراحی شده.این معماری به این صورت هست که کامپونت Parent که تمام منطق ما اینجا قرار داره و State Full هست دیتا رو فقط در یک مسیر به کامپونت های Child که State Less هستند منتقل میکنه. به این روش اصطلاحا One Way Date Flow میگن.یعنی دیتا که در کامپونت A قرار داره و ما در کامپونت D بهش نیاز داریم مسیر کامپونت B و C رو رد میکنه تا به مقصد برسه. حالا اگه این مسیر رو با تعداد زیادی کامپونت فرض کنید و دیتا رو از بین این کامپونت ها عبور بدیم که شاید به اون دیتا احتیاجی هم نداشته باشند. میبینید که باعث بروز مشکلات و پیچیدگی های زیادی میشه.

چطور این مشکلات حل شدن؟

بر طبق این پترن ما State هامون رو در یکجا که اصطلاحا به اون Store میگیم نگهداری میکنیم. با این روش به راحتی میتونیم State ها رو به کامپونت های مختلف ارسال کنیم.و همچنین به راحتی قابل پیشبینی و تست کردن هستند.

چه زمانی باید از ngrx@ تو برناممون استفاده کنیم؟

گاهی کامپونت های برنامه ما به قدری زیاد و بزرگ میشن که کنترل این State ها از دست خارج میشه و برای انتقالشون با مشکل روبرو میشیم و برای مدیریت بهتر لازمه که از Redux Pattern استفاده کنیم.

در پست های بعدی فریمورک ngrx@ رو باز تر میکنیم و به پکیج هایی که داخلش قرار دارن میپردازیم و ساخت یک اپلیکیشن رو شروع میکنیم.