Posted on نوشتن کامنت

Redux چیست؟

redux

Redux ابزار مدیریت وضعیت برای برنامه های جاوا اسکریپت است. در حالی که آن را اغلب با React استفاده می شود، آن را با بسیاری از چارچوب های دیگری که شبیه Reactهستند مانند Preact ،Inferno و همچنین Angular و حتی جاوا اسکریپت ساده سازگار است. مفهوم اصلی پشت Redux این است که کل وضعیت یک برنامه در یک مکان مرکزی ذخیره می شود. هر کامپوننت یک برنامه می تواند دسترسی مستقیم به وضعیت برنامه را بدون نیاز به ارسال props به کامپوننت های کودک و یا استفاده از call back function برای ارسال اطلاعات به یک parent داشته باشد.

چرا باید از آن استفاده کنیم؟

در نگاه اول، ممکن است به نظر می رسد استفاده از Redux در یک برنامه React حدودی گیج کننده باشد.

آیا کامپوننت ها وضعیت خود را ندارند؟

چرا شما نیاز دارید وضعیت بیشتری را به برنامه خود اضافه کنید یا از ابزار دیگری برای مدیریت آن وضعیت استفاده کنید؟

React فوق العاده است، و کاملا امکان نوشتن یک برنامه کامل با استفاده از چیزی جز React وجود دارد. با این حال، به عنوان یک نرم افزار پیچیده تر می شود، گاهی اوقات آن را به عنوان React قدیمی دم دست نداست. با استفاده از یک کتابخانه مدیریت وضعیت مانند Redux می توانید برخی از مسائلی را که در برنامه های کاربردی پیچیده تر رخ می دهد را کاهش دهید.

اگر درباره Redux خواندید، مزایای متعددی را که معمولا مورد بحث قرار می گیرید خواهید دید.

  • به روز رسانی های پیش بینی شده وضعیت، این درک را آسان می کند که چگونه جریان داده ها در برنامه کار می کند
  • استفاده از pure reducer functions باعث می شود منطق تست را آسان تر کرده و ویژگی های مفید مانند ” time-travel debugging ” را فعال می کند.
  • مرکزی کردن وضعیت باعث می شود که چیزهایی مانند ثبت تغییرات داده ها یا ماندگاری داده ها بین رفرش کردن صفحات به کار رفته باشد

علاوه بر مزایای عمومی، Redux برخی از مزایا را برای حفظ وضعیت در یک برنامه React فراهم می کند. در اینجا چند نمونه آورده شده است.

Master / Detail Views

برخی از کامپوننت ها ممکن است نیاز به دسترسی به همان وضعیت، اما آن را به روش های مختلف نمایش داسته باشند. یک مثال خوب، یک ویو کلاسیک “مستر / دیتیل” است که در آن لیستی از خلاصه های از هر یک از آیتم ها (مستر) را نشان می دهد و همچنین یک کامپوننت که همه جزئیات مربوط به آیتم انتخاب شده را نشان می دهد (دیتیل).

چه کسی داده ها را دارد؟

مشکل ما با ویووهای master / detail به سوال ما مربوط می شود که داده های ما کجا “زندگی می کنند”. داشتن دو کامپوننت که داده های مشابه را به اشتراک می گذارد، می تواند آن را آشفته کند، به خصوص زمانی که می خواهیم داده هایمان را “همگام” نگه داریم. ایده آل source-of-truth تنها در یک مکان است.

هنگامی که ما دو children داریم که نیاز به دسترسی به داده های مشابه دارند، اسناد react تشویق تان می کند به “بالا بردن وضعیت” ، بدین معنا که قرار دادن داده ها در نزدیکترین اجداد دو کامپوننت.

در این مثال ساده، دو کامپوننت فرزند مستقیم هستند. با این حال، اگر این دو کامپوننت در درخت بسیار دور باشند، نزدیکترین اجداد ممکن است در سطح بالای درخت باشند. این بدان معنی است که اجداد باید داده ها را به عنوان props منتقل کند، از طریق چندین کامپوننت واسط دیگر در طول مسیر.

پاس کردن این props ها به این ترتیب می تواند در trace گیج کننده باشد. همچنین باعث می شود که جابه جایی کامپوننت ها دشوار باشد زیرا اتصالاتی بین آنها وجود دارد

  • کامپوننت و والدش (برای props های این کامپوننت ممکن است در این مورد نگرانی وجود نداشته نباشد) و
  • فرزندان کامپوننت (که مجددا، کامپوننت واسط ​​ممکن است از این props ها استفاده نکنند).

همچنین می تواند یک مسئله پرفورمنس در میان باشد، چرا که هر بروزرسانی داده ها باعث می شود که تمام فرزندان دوباره رندر شوند.

Redux به نجات می آید!

Redux به ما در این سناریوهای پیچیده کمک می کند که کامپوننت های متعددی می خواهند برخی یا همه داده های مشابه را به اشتراک بگذارند، اما به هیچ وجه به یکدیگر وابسته نیستند. Redux یک ذخیره مرکزی فراهم می کند که می تواند داده ها را از هر نقطه از برنامه نگه دارد. در Redux یک store فقط یک شیء جاوا اسکریپت با چند متد بر روی آن است. Redux همچنین اجازه می دهد تا کامپوننت های مشخصی به store متصل شوند و فقط قطعات داده ای که نیاز دارند استخراج کنند. بعضی از توسعه دهندگان تمام داده های برنامه خود را در استور Redux قرار می دهند، اما اگر می خواهید، برخی از داده ها را در قسمت های اجزای سازنده خود نگه دارید، تصمیم می گیرید که داده ها متعلق به آن باشند.

در مثال master / detail، لیست می تواند نام تمام اقلام را استخراج و آنها را رندر کند و کامپوننت detail می تواند تمام attributes های یک آیتم را استخراج و نشان دهد.

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

به روز رسانی داده ها

Redux، همانند React، یک جریان داده ی دقیق و یک طرفه را دنبال می کند. این به دلایل بسیاری مفید است، همانطور که در اسناد Redux مشخص شده است:

تمام داده ها در یک برنامه زیر یک الگوی چرخه عمر است که درک منطق برنامه شما را قابل پیش بینی تر و راحت تر می کند. همچنین این امر باعث نرمال بودن داده ها می شود ، به طوری که شما با چندین نسخه مستقل از داده های مشابه که از یکدیگر بی اطلاع هستند، مواجه نیستید.

هنگامی که به روز رسانی store ضروری است، مسیر به روز رسانی داده ها در store به همان جریان همیشگی، بدون توجه به جایی که به روز رسانی در حال آمدن از آن است و یا از داده های ورودی کاربر به یک فرم و یا تهیه داده ها از یک API REST . درست همانطور که همه رودخانه ها به اقیانوس هدایت می شوند، داده ها در یک برنامه Redux در یک جهت جریان می یابند تا به store منتقل شوند.

بهبود زمان توسعه با Hot Reloading

Redux همچنین به ما کمک می کند زمان صرف شده را در زمان توسعه بهبود بخشیم، زیرا می توانیم با “Hot Reload”وضعیت برنامه را حفظ کنیم.
Hot Reload ، توانایی ری لود خودکار قسمت هایی از کد شماست هر بار که فایل را ذخیره می کنید، بدون نیاز به refresh کل صفحه. یک ابزار ساخت مانند Webpack می تواند پیکربندی شود تا برای مشاهده فایل های روی دیسک، و کد برنامه می تواند برای رویدادهای نوع “file reloaded”
listen  کند. وقتی یک رویداد بارگیری مجدد دریافت می شود، برنامه می تواند نسخه قدیمی کد را با نسخه تازه به روز شده، مانند آخرین نسخه یک فایل کامپوننت React، جایگزین کند.

متاسفانه در Hot Reloading کامپوننت های React، درخت کامپوننت های موجود خود را پاک می کند، از جمله هر state ذخیره شده در داخل آنها را. این بدان معنی است که اگر وقت خود را در تعامل با برنامه خود در توسعه گذرانده باشید و فقط این اطلاعات را در حالت Component React داشته باشید، Hot Reload به طور موثر تمام داده ها را از بین می برد و UI خود را به حالت اولیه بازنشانی می کند. نگه داشتن وضعیت جدا از درخت UI اجازه می دهد که درخت UI را با اجزای به روز شده تغییر داده و بارگذاری کنید، در حالی که حالت توسعه فعلی شما همان است.

با این حال، هنگامی که کامپوننت های مرتبط Redux بارگیری می شوند، آنها بلافاصله اطلاعات فعلی را از ذخیره Redux می خوانند و این داده ها را با کد به روز شده رندر می کنند. این به شما امکان می دهد تا به طور موثری “UI Live” را ویرایش کنید و فرآیند توسعه را بسیار سریعتر انجام دهید.

شما مجبور به Redux نمی باشید

Dan Abramov
Dan Abramov

به طور کلی، قطعا درست است که شما می توانید یک برنامه کامل را با استفاده از تنها به کار بردن وضعیت کامپوننت React بنویسید. خالق Redux یعنی Dan Abramov می گوید که مردم اغلب خیلی زود به Redux پرتاب می شوند و مقاله ای به نام “شما ممکن است نیاز به Redux نداشته باشید” را برای تشویق مردم به فکر کردن در مورد چرا آنها می خواهند از Redux استفاده کنند نوشته است. گفته، دلایل زیادی برای استفاده از Redux در یک برنامه React (یا حتی با چارچوب های دیگر مانند Angular) وجود دارد. همانطور که درهر تکنولوژی، مشکلاتی وجود دارد، اما از نظر من، استفاده از Redux کاملا ارزشمند است.

برای اطلاعات بیشتر درباره React.js به اینجا رجوع کنید.

منبع

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *