redux یک الگوی الهام گرفته از معماری  flux فیسبوک میباشد بنابراین برای فهم redux بهتر است ابتدا flux رو به شما معرفی کنم تا نحوه به وجود آمدن redux و تفاوتش با flux برای شما بدرستی مشخص شود

لیست مطالب

• flux و روش کار آن
• redux و روش کار آن

flux و روش کار آن

flux به نوعی یک باز سازی از ایده های قبلی mvc ، mvvm و twoway data binding است که یک جریان جدید در فرانت به نام undirectional data flow رو معرفی میکنه و از سه بخش اصلی  stores , dispatcher و action تشکیل شده است

undirectional data flow الگویی که که در آن جریان تبدیل model به view یکطرفه است و چون جریان داده یکطرفست همیشه مشخصه که داده از کجا اومده و تبدیل به چی شده

با توجه به شکل زیر روش کار flux به شرح زیر میباشد

1. در ابتدا مجموعه ای از store ها به action ها  subscribe میشن
2. بعد از اینکه یک action در ui اتفاق میفته به dispatcher اطلاع داده میشه
3. dispatcher به store های subscribe شده اطلاع رسانی میکنه تا خودشون رو بروز رسانی کنن
4. state مربوط به هر store ها با توجه به action بروزرسانی میشه
5. در انتها ui هم با توجه به state های جدید بروزرسانی میشه

مثلا وقتی کاربر درجایی کلیک میکنه یک action برای dispatcher ارسال میشه تا مدیریت کنه بنابراین به store های subscribe شده اطلاع رسانی میکنه و اونا هم state شون رو بروز رسانی میکنند و ui بر اساس state های جدید بروز رسانی میشود

redux و روش کار آن

از آنجاییکه redux نشات گرفته از flux است تفاوت و شباهت هایی باهم دارند، مثلا redux فقط از یک store تنها استفاده میکند و action ها مستقیما توسط store مدیریت میشوند پس دیگر نیازی به dispatcher نبوده و مفهومی بنام reducer جایگزین آن شده است و همچنین middleware که میتواند action ها رو حذف و اضافه کند یا تغییری در آنها بدهد

با توجه به شکل زیر روش کار redux به شرح زیر میباشد

1. وقتی  یک action در ui اتفاق میفته reducer بر اساس action و state جاری که برای آن فرستاده میشه یک state جدید میسازه و به store میده
2. به محض اینکه یک action باعث تغییر یک state بشه و state جدید توسط reducer ساخته بشه، store به کسانی که باید از این state مطلع شوند اطلاع رسانی میکنه

سه اصل مهم در redux

Single source of truth : تمام state ها داخل یک object کامپوزیشن (درختی) بنام store ذخیره میشه
State is read-only : تنها راه تغییر state اینه که یک action رو dispatch کنیم این کار برای اینه که داده هرگز mutate نشه و برای این کار باید از reducer استفاده بشه
Changes are made with pure functions : در واقع reducer ها pure function هایی هستند که state فعلی و یک action میگیرن و بدون تغییر روی state فعلی یک state جدید برمیگردانند