Redux toolkitni 10 qadamda o’rganing.

Bu maqola eng avval twit sifatida e’lon qilingan: https://twitter.com/chrisachard/status/13385073837656

Agar siz Reduxdan foydalanayotgan bo’lsangiz, endi redux toolkitga o’tish fursati keldi. Toolkitni 10ta qadamda ko’rib chiqamiz:

1.

«configureStore» bilan Redux store yarating. Storeda barcha ma’lumotlaringiz va ma’lumotlarni o’zgartiradigan «action»lar saqlanadi.

Do’konni barcha komponentlar bilan aloqasini ta’minlash uchun «Provider» componentidan foydalaning:

2.

«slices» yarating.

Slice statening bir qismini va shu stateni yangilash mumkin bo’lgan funksiyalarni o’z ichiga oladi.

Bitta actionni yozish uchun 4ta faylni o’zagrtirish endi kerak emas! 🎉

3.

Reducerga slice qo’shish orqali sliceni «store»ga bog’lang.

4.

Storedagi statelarni yangilaydigan funksiyalar bu reducerlar. Reducer hozirgi stateni oladi va ma’lumotni slicedagi ma’lumotga yangilaydi.

Toolkit immerdan foydalanadi, shuning uchun statelar mutatsiyaga uchramaydi.

5.

Componentdagi storedan ma’lumotlarni olish uchun «selector»dan foydalaning. Selector funksiyasi asosiy storega beriladi va faqat kerakli ma’lumotni return qiladi (qaytaradi).

Selectorni «useSelector» hukiga o’tkazing(joylang).

6.

Storedagi ma’lumotlarni o’zgartirish uchun, slicedan eksport qilingan actionsdan foydalaning. Bu actionlar siz nomlagan reducerlar asosida nomlanishi kerak.

Biroq, ularni to’g’ridan to’g’ri chaqira olmaysiz, chunki ular hozirgi state va action parametrlariga muhtoj.

7.

Actionlarni chaqirish uchun siz «dispatch»dan foydalanasiz.

Dispatchga kirish uchun «useDispatch» hukidan foydalaning va shu ushbu funksiyadan foydalanib actionni yuboring. Bu «useSelector» yordamida barcha komponentnarni avtomatik tarzda yangilaydi.

8.

Actionlar reducerga 2-argument sifatida uzatiladigan parametrlarni ham qabul qilishi mumkin.

«payload» actioni actionga o’tgan barcha harakatlarni o’z ichiga oladi.

(bir nechta harakatlari o’tkazish uchun obyektdan foydalaning)

9.

Asinxron harakatlar uchun redux-thunkdan foydalanishingiz mumkin.

Thunkni yarating.

U asinxron va dispatchni parametr sifatida oladi.

Dispatch thunk funksiyasi ichida bo’ladi.

Keyin actionni odatdagidek komponentda yuboring.

10.

Buning o’rniga faqat Kontekstdan foydalanish haqida nima deyish mumkin?

Ha, men odatda loyihalarni faqat kontekst bilan boshlayman, lekin redux kattaroq loyihalar yoki jamoalar uchun ba’zi afzalliklarga ega bo’lishi mumkin:

• kontekstda mavjud bo’lmagan tuzilmani taqdim etadi
• sinovdan o’tkazish osonroq bo’lishi mumkin
• redux dev tools juda zo’r 💯

Resurslar:

Ushbu misol uchun kod:

https://github.com/chrisachard/redux-toolkit-example

Tez boshlash redux-toolkit hujjatlari:

https://redux-toolkit.js.org/introduction/quick-start

Redux devtools chrome extension:

https://github.com/zalmoxisus/redux-devtools-extension

Muallif: Chris Achard. Tarjima: https://t.me/Ifargoniy