eng.mr.gohari
eng.mr.gohari
خواندن ۳ دقیقه·۲ سال پیش

Step 1 for using state management Redux in React | نحوه استفاده از redux در react

Hello dear friends, this is a short article and some stories. So I start it to help you to reduce complexity of concept Redux, this is a tutorial for using react Redux in your project, I hope that it can help to you to increase your knowledge, if you need to learn code of this tutorial please comment blew to record a video and publish on the YouTube and share my code in GitHub repository.

We have some important sections in Redux such as :

  • Store: store all state in store file, and It's a unique file.
  • Action: It can do something in your project, such as like post, or publish post and...
  • Reducer: It runs instruction of Action. Seriously, It works between Store and Actions.

So this life cycle workflow is:

1-User clicked on a component in the view, so run dispatch.

2-Action run with dispatch.

3-Action run reducer for changing on the store (our state on store)

* attention: Store can be changed just with reducers.

4-finally, Store subscribe a view for show result.

* attention : use connect for your App component for connecting to the Redux.

I will put the part in the next article, the link of which I have given you below, after publication

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

ریداکس از سه بخش اصلی تشکیل میشه که شامل:

  • Store: ذخیره میکنه همه اسیت ها رو داخل یه فایل منحصر به فرد (منظورم اینه فقط یه دونه استور فایل بیشتر نداریم توی پروژه)
  • Action: این می تونه هر فعالیتی که کاربر انجام میده باشه مثلا کلیک کنه روی لایک یا پست منتشر کنه یا غیره
  • Reducer: اجرا میکنه دستوراتی که اکشن بهش میده.در واقع این بین اکشن و استور داره کار میکنه مثلا اضافه کن یه دونه به لایک ها.

بنابراین این life cycle یا چرخه حیاتش به این شکل هست:

1- کاربر ابتدا روی یه کامپوننت مثلا دکمه نمایش محصولات کلیک می کنه و یعنی روی view کلیک می کنه و با این کار فرایند dispatch رو اجرا می کنه.

2- حالا Action ما توسط dispatch اجرا میشه ( Dispatch جان Action رو اجرا می کنه در واقع)

3- حالا Action هم میاد reducer رو اجرا میکنه برای اینکه تغییرات مون رو توی store اعمال کنه ( یا بهتره بگم تغییرات مون رو توی state های store مون اعمال می کنه.

** نکته : Store فقط و فقط توسط Reducer تغییر میکنه.

4- در نهایت هم Store ما میاد Subscribe میکنه برای view که نتایج مون رو نمایش بده. همین ;)


قسمت رو توی مقاله بعدی که لینکش رو این زیر براتون بعد از انتشار گذاشتم میزارم
کد نویسیگیت هابreduxreactreact redux
I love technology and am interested in mental challenges, especially in the field of programming and software development
شاید از این پست‌ها خوشتان بیاید