Hozirda React framewrokga asoslangan veb-ilovalarning State management ishlab chiqish Redux kutubxonasi yordamida amalga oshirilmoqda. Ushbu kutubxona FLUX arxitekturasining eng mashhur amalga oshirilishi hisoblanadi va bir qator aniq afzalliklarga qaramay, juda muhim kamchiliklarga ega, masalan: coder

• kodni yozish va tartibga solish uchun tavsiya etilgan naqshlarning murakkabligi.

• asenkron xatti-harakatlar va nojo'ya ta'sirlarni boshqarish vositalarining etishmasligi, bu uchinchi tomon ishlab chiquvchilari tomonidan yozilgan ko'plab qo'shimchalardan mos vositani tanlash zarurligiga olib keladi.

Ushbu kamchiliklarni bartaraf etish uchun Redux ishlab chiquvchilari Redux Toolkit kutubxonasini taqdim etdilar. Ushbu vosita Redux yordamida ilovalarni ishlab chiqishni soddalashtirish uchun mo'ljallangan amaliy echimlar va usullar to'plamidir. Ushbu kutubxonani ishlab chiquvchilar Redux-dan foydalanishning odatiy holatlarini soddalashtirishni maqsad qilishgan. Ushbu vosita Redux-dan foydalanishning har bir mumkin bo'lgan holatida universal echim emas, lekin ishlab chiquvchi yozishi kerak bo'lgan kodni soddalashtirishga imkon beradi.

Ushbu maqolada biz Redux Toolkit-ga kiritilgan asosiy vositalar haqida gaplashamiz, shuningdek, ichki dasturimizning bir qismi misolida ularni mavjud kodda qanday ishlatishni ko'rsatamiz.

Bepul ReactJS va Redux kurimizni ko'rishingiz mumkin.

Redux-Toolkit kutubxona haqida qisqacha

• Chiqarilishidan oldin kutubxona redux-starter-kit deb nomlangan;

• reliz 2019 yil oktyabr oyining oxirida bo'lib o'tdi;

• kutubxona rasmiy ravishda Redux ishlab chiquvchilari tomonidan qo'llab-quvvatlanadi.

Ishlab chiquvchilarning bayonotiga ko'ra, Redux Toolkit quyidagi funktsiyalarni bajaradi:

• Redux - dan tezda foydalanishni boshlashga yordam beradi;

• Oddiy vazifalar va Redux kodi bilan ishlashni osonlashtiradi;

• Redux-ning eng yaxshi standart amaliyotlaridan foydalanishga imkon beradi;

• Shablon kodi bo'lgan ishonchsizlikni kamaytiradigan echimlarni taklif qiladi.

Redux Toolkit maxsus ishlab chiqilgan to'plamni taqdim etadi va odatda Redux bilan birgalikda ishlatiladigan bir qator yaxshi tasdiqlangan vositalarni qo'shadi. Ushbu yondashuv ishlab chiquvchiga o'z ilovasida qanday va qanday vositalardan foydalanishni hal qilish imkonini beradi. Ushbu maqola davomida biz ushbu kutubxona qanday qarzlardan foydalanishini ta'kidlaymiz. To'liqroq ma'lumot va Redux Toolkit bog'liqliklarini @reduxjs/toolkit paket tavsifidan olish mumkin.

Redux Toolkit kutubxonasi tomonidan taqdim etilgan eng muhim xususiyatlar:

• configureStore — saqlash yaratish va sozlash jarayonini soddalashtirishga mo'ljallangan xususiyat;

• createReducer — reduserni qisqacha va tushunarli tarzda tasvirlash va yaratishga yordam beradigan funktsiya;

• createAction — berilgan harakat turi qatori uchun harakat yaratuvchisi funktsiyasini qaytaradi;

• createSlice — createaction va Create Reducer funksiyalarini birlashtiradi;

• createSelector — Reselect kutubxonasidagi funksiya foydalanish qulayligi uchun haddan tashqari ko'p.

Shuni ham ta'kidlash kerakki, Redux Toolkit TypeScript bilan to'liq birlashtirilgan. Bu haqda ko'proq ma'lumotni rasmiy hujjatlarning TypeScript bilan foydalanish bo'limidan olishingiz mumkin.

Foydalanish

Redux Toolkit kutubxonasidan haqiqatan ham ishlatiladigan React Redux dasturining bir qismi misolida foydalanishni ko'rib chiqing.
Eslatma. Maqolada Redux Toolkit-dan foydalanmasdan ham, ushbu kutubxonadan foydalanishning ijobiy va salbiy tomonlarini yaxshiroq baholashga imkon beradigan manba kodi keltirilgan.

Vazifa

Bizning ichki ilovalarimizdan birida biz ishlab chiqaradigan dasturiy mahsulotlarning reliz ma'lumotlarini qo'shish, tahrirlash va ko'rsatish zarurati paydo bo'ldi. Ushbu harakatlarning har biri uchun alohida API funktsiyalari ishlab chiqilgan, ularning natijalari Redux do'koniga qo'shilishi kerak. Asenkron xatti-harakatlar va yon ta'sirlarni boshqarish vositasi sifatida biz Thunk-dan foydalanamiz.

Store yaratish

State (ombor) yaratishni amalga oshiradigan manba kodining dastlabki versiyasi quyidagicha edi:

import {
  createStore, applyMiddleware, combineReducers, compose,
} from 'redux';
import thunk from 'redux-thunk';
import * as reducers from './reducers';

const ext = window.__REDUX_DEVTOOLS_EXTENSION__;
const devtoolMiddleware = 
  ext && process.env.NODE_ENV === 'development' ? ext() : f => f;

const store = createStore(
 combineReducers({
   ...reducers,
 }),
 compose(
   applyMiddleware(thunk),
   devtoolMiddleware
 )
);

Agar siz berilgan kodni diqqat bilan ko'rib chiqsangiz, bajarilishi kerak bo'lgan juda uzoq harakatlar ketma-ketligini ko'rishingiz mumkin saqlash to'liq tuzilgan bo'lishi uchun. Redux Toolkit ushbu protsedurani soddalashtirish uchun mo'ljallangan vositani o'z ichiga oladi, ya'ni: configureStore funktsiyasi.

Funktsiyasi configureStore

Ushbu vosita sizga reduserlarni avtomatik ravishda birlashtirish, Redux midlvarlarini qo'shish (sukut bo'yicha redux-thunk-ni o'z ichiga oladi), shuningdek Redux DevTools kengaytmasidan foydalanish imkonini beradi. Kirish parametrlari sifatida configureStore funktsiyasi quyidagi xususiyatlarga ega ob'ektni oladi:

• reducer — maxsus reduserlar to'plami,

• middleware — omborga ulanish uchun mo'ljallangan o'rta vars massivini belgilaydigan ixtiyoriy parametr,

• devTools — brauzerga o'rnatilgan Redux DevTools kengaytmasini yoqish uchun mantiqiy turdagi parametr (standart qiymat rost),

• preloadedState — dastlabki saqlash holatini belgilaydigan ixtiyoriy parametr,

• enhancers — kuchaytirgichlar to'plamini belgilaydigan ixtiyoriy parametr.https://media.graphassets.com/output=format:webp/resize=width:1280,height:720/rqCGSXIAQYWHIIdHqbqb