statemangment react(redux,context-api,mobx)

خوبی که react نسبت به vue ,angular داره statemanagment های زیادی داره من از اونایی که تو ایران محبوبیت بیشتری داره با مثال و کد بهتون توضیح میدم.

redux

خط اول که توضیحی نداره خط دوم لایبری های مورد نیاز اضافه میکنیم که applyMiddleware ,create Store و خط سوم من redux thunk اضافه کردم چون میخوام یک middleware برای store تعیین کنم. یک reducer درست کردم که همه action که نیاز داریم بچینم که گفتی یک چیزی Add کن بعد به من action در خروجی نشون بده در غیر این صورت state نشون بده و خط بعد store ,Reducer,apply Middleware نوشتم

به عکس بعدی توجه کنید.

صفحه بعدی که مثال خود create react app هست اینم ادرس گیت هاب

https://github.com/pooriavakili/redux

https://github.com/startapprogress/ata

یا این پروژه برای react-native که redux کمی پیچیده ولی میشه ساده ترش کرد.

context-api

به این چند عکس توجه کنید

اینم ادرس گیت هاب میتونی استفاده کنید وچیزی از کدش یاد بگیرید.

https://github.com/pooriavakili/context-api

mobx

به این عکس ها نگاه کنید.

اینم کد گیت هابش که مطالعه کنید.

https://github.com/pooriavakili/mobx

حرف آخر

هدف من از نوشتن این مقاله این بود که نگیم redux سخت با context-api کار کنم یا من همه کدم با redux نوشتم بعد بیام صورت مسئله پاک کنم همه از context-api بنویسم. اول از همه نیاز پروژه نگاه کنید بعد statemanagment خوب انتخاب کنید اگر می بینید کد redux پیچیده پکیج بسازید و ساده تر کنید من چند تا برای redux معرفی میکنم

https://virgool.io/iran-react-community/%D8%AE%D8%AF%D8%A7%D8%AD%D8%A7%D9%81%D8%B8-%D8%AF%D8%B4%D9%88%D8%A7%D8%B1%DB%8C%D9%87%D8%A7%DB%8C-redux-zypz5yuqq0t1

این مقاله اقای ابراهیمی اول حتما بخونینش

https://virgool.io/iran-react-community/%D8%B1%DB%8C%D8%AF%D8%A7%DA%A9%D8%B3-%D8%A8%D9%87-%D8%B2%D8%A8%D8%A7%D9%86-%D8%B3%D8%A7%D8%AF%D9%87-emxqh7w4gnpk

اینم مقاله نیما محمدیان در مورد redux

یا context-api

https://virgool.io/iran-react-community/hi-context-by-redux-r9mryjuvr8nd

اینم پکیج خیلی خوب در مورد mobx که اقای محمد حسین دادیان نوشته است.

https://www.npmjs.com/package/mobx-react-lite

بعد از خواندن مقاله از state managment که انتخاب کردی یک عکس بکشید مثل این دو عکس