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:

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.

a8573b7c-95b2-4459-8414-8eacde874b0a-kilwdl.png

Ishlab chiquvchilarning bayonotiga ko'ra, Redux Toolkit quyidagi 

Redux Toolkit maxsus ishlab chiqilgan to'plamni taqdim etadi va odatda Redux bilan birgalikda ishlatiladigan bir qator yaxshi tasdiqlangan 

 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 

Redux Toolkit kutubxonasi tomonidan taqdim etilgan eng muhim xususiyatlar:

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

Redux Toolkit kutubxonasidan haqiqatan ham ishlatiladigan React Redux dasturining bir qismi misolida foydalanishni ko'rib chiqing.


. Maqolada Redux Toolkit-dan foydalanmasdan ham, ushbu kutubxonadan foydalanishning ijobiy va salbiy tomonlarini yaxshiroq baholashga imkon beradigan manba kodi keltirilgan.

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 

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.

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:

O'rta bo'limlarning eng mashhur ro'yxatini olish uchun siz Redux Toolkit-ning bir qismi bo'lgan getDefaultMiddleware-ning maxsus funktsiyasidan foydalanishingiz mumkin. Ushbu funktsiya sukut bo'yicha Redux Toolkit kutubxonasiga kiritilgan midlvarlar bilan qatorni qaytaradi. Ushbu o'rta varlarning ro'yxati sizning kodingiz qaysi rejimda ishlashiga qarab farq qiladi. Ishlab chiqarish rejimida massiv faqat bitta elementdan iborat — thunk. Rivojlanish rejimida ushbu yozuv paytida ro'yxat quyidagi midlvarlar bilan to'ldiriladi:

Midlvarlarning qaytish ro'yxatini belgilash uchun getDefaultMidlleware funksiyasi kiritilgan midlvarlar ro'yxatini va ularning har biri uchun sozlamalarni belgilaydigan obyektni qabul qiladi. Ushbu ma'lumot haqida ko'proq ma'lumotni rasmiy hujjatlarning tegishli qismida topishingiz mumkin.

Endi yuqorida tavsiflangan vositalardan foydalanib, omborni yaratish uchun mas'ul bo'lgan kod qismini qayta yozamiz. Natijada biz quyidagilarni olamiz:

 { configureStore, getDefaultMiddleware } 

 middleware = getDefaultMiddleware({
  immutableCheck: false,
  serializableCheck: false,
  thunk: true,
});



 store = configureStore({
 reducer: { ...reducers },
 middleware,
 devTools: process.env.NODE_ENV !== 'production',
});

Kodning ushbu qismi misolida configreStore funktsiyasi quyidagi muammolarni hal qilishini aniq ko'rish mumkin:

Shuningdek, redux-devtools-extension paketidagi composeWithDevTools xususiyatidan foydalanib, 

 yanada qulayroq yoqish imkonini beradi. Yuqorida aytilganlarning barchasi ushbu funktsiyadan foydalanish kodni yanada ixcham va tushunarli qilish imkonini beradi.

Endi Redux Toolkit-ning harakatlarni ishlab chiqish, harakat yaratuvchilari va reduser-ning imkoniyatlarini ko'rib chiqamiz. Redux Toolkit-dan foydalanmasdan kodning dastlabki versiyasi actions fayllari sifatida tashkil etilgan.js va reducers.js. Actions faylining tarkibi.js quyidagicha ko'rinardi:

 PRODUCT_RELEASES_FETCHING = 'PRODUCT_RELEASES_FETCHING';


 PRODUCT_RELEASES_FETCHED = 'PRODUCT_RELEASES_FETCHED';


 PRODUCT_RELEASES_FETCHING_ERROR =
  'PRODUCT_RELEASES_FETCHING_ERROR';

…



 PRODUCT_RELEASE_UPDATING = 'PRODUCT_RELEASE_UPDATING';


 PRODUCT_RELEASE_UPDATED = 'PRODUCT_RELEASE_UPDATED';


 PRODUCT_RELEASE_CREATING_UPDATING_ERROR =
  'PRODUCT_RELEASE_CREATING_UPDATING_ERROR';



 {
    type: PRODUCT_RELEASES_FETCHING
  };
}



 productReleasesFetched(productReleases) {
  

 {
    type: PRODUCT_RELEASES_FETCHED,
    productReleases
  };
}



 productReleasesFetchingError(error) {
  

 {
    type: PRODUCT_RELEASES_FETCHING_ERROR,
    error
  }
}

…



 dispatch => {
    dispatch(productReleasesFetching());
    

 productReleasesService.getProductReleases().then(
      productReleases => dispatch(productReleasesFetched(productReleases))
    ).catch(error => {
      error.clientMessage = "Can't get product releases";
      dispatch(productReleasesFetchingError(error))
    });
  }
}

…



 updateProductRelease(
  id, productName, productVersion, releaseDate
) {
  

 dispatch => {
    dispatch(productReleaseUpdating());
    

 productReleasesService.updateProductRelease(
      id, productName, productVersion, releaseDate
    ).then(
      productRelease => dispatch(productReleaseUpdated(productRelease))
    ).catch(error => {
      error.clientMessage = "Can't update product releases";
      dispatch(productReleaseCreatingUpdatingError(error))
    });
  }
}

Reducers faylining tarkibi.Redux Toolkit-dan foydalanishdan oldin js:

 initialState = {
 productReleases: [],
 loadedProductRelease: null,
 fetchingState: 'none',
 creatingState: 'none',
 updatingState: 'none',
 error: null,
};



 reducer(state = initialState, action = {}) {
 

 productReleases.PRODUCT_RELEASES_FETCHING:
     

 {
       ...state,
       fetchingState: 'requesting',
       error: null,
     };
   

 productReleases.PRODUCT_RELEASES_FETCHED:
     

 {
       ...state,
       productReleases: action.productReleases,
       fetchingState: 'success',
     };
   

 productReleases.PRODUCT_RELEASES_FETCHING_ERROR:
     

 {
       ...state,
       fetchingState: 'failed',
       error: action.error
     };

…

   

 productReleases.PRODUCT_RELEASE_UPDATING:
     

 {
       ...state,
       updatingState: 'requesting',
       error: null,
     };
   

 productReleases.PRODUCT_RELEASE_UPDATED:
     

 {
       ...state,
       updatingState: 'success',
       productReleases: state.productReleases.map(productRelease => {
         

 (productRelease.id === action.productRelease.id)
           

 productReleases.PRODUCT_RELEASE_UPDATING_ERROR:
     

 {
       ...state,
       updatingState: 'failed',
       error: action.error
     };
   

Ko'rib turganimizdek, bu erda Shablon kod qismi mavjud: harakat turlarining konstantalari, harakatlar yaratuvchilari, yana doimiylar, ammo allaqachon reduser kodida ushbu kodning barchasini yozish uchun vaqt sarflashingiz kerak. Agar siz Redux Toolkit-ning bir qismi bo'lgan createAction va createReducer funktsiyalaridan foydalansangiz, ushbu shablon kodida qisman xalos bo'lishingiz mumkin.

Endi reduserni ko'rib chiqamiz. Bizning misolimizda bo'lgani kabi, reducerlar ko'pincha switch operatori yordamida amalga oshiriladi, har bir qayta ishlangan harakat turi uchun bitta registr mavjud. Ushbu yondashuv yaxshi ishlaydi, ammo shablon kodi yo'q va xatolarga moyil emas. Masalan, default ishini tasvirlashni unutish yoki dastlabki holatni o'rnatmaslik oson. Create Reducer xususiyati har bir faoliyat turini boshqarish uchun xususiyatlarni qidirish jadvallari sifatida belgilash orqali Reducer xususiyatlarini yaratishni osonlashtiradi. Bundan tashqari, reducerlar ichida "o'zgaruvchan" uslubda kod yozib, immutable yangilash mantig'ini sezilarli darajada soddalashtirishga imkon beradi.

 kutubxonasidan foydalanish tufayli voqealarni qayta ishlash "immutable" uslubi mavjud. Funktsiya ishlov beruvchi xususiyatlarni o'zgartirish uchun uzatilgan staetni "mutatsiya" yoki immutable uslubda bo'lgani kabi yangi stateni qaytarishi mumkin, ammo Immer tufayli ob'ektning haqiqiy mutatsiyasi amalga oshirilmaydi. Birinchi variant, ayniqsa, chuqur joylashtirilgan ob'ektni o'zgartirganda, ishlash va idrok etish uchun ancha oson.

Ehtiyot bo'ling: yangi ob'ektni funktsiyadan qaytarish o'zgarishlarni qoplaydi. Vaziyatni yangilashning ikkala usulini bir vaqtning o'zida qo'llash ishlamaydi.

Kirish parametrlari sifatida create Reducer funksiyasi quyidagi argumentlarni qabul qiladi:

CreateReducer usulidan foydalanib, biz quyidagi kodni olamiz:

 initialState = {
 productReleases: [],
 loadedProductRelease: null,
 fetchingState: 'none',
 creatingState: 'none',
 loadingState: 'none',
 error: null,
};



 counterReducer = createReducer(initialState, {
 [productReleasesFetching]: (state, action) => {
   state.fetchingState = 'requesting'
 },
 [productReleasesFetched.type]: (state, action) => {
   state.productReleases = action.payload.productReleases;
   state.fetchingState = 'success';
 },
 [productReleasesFetchingError]: (state, action) => {
   state.fetchingState = 'failed';
   state.error = action.payload.error;
 },

…

 [productReleaseUpdating]: (state) => {
   state.updatingState = 'requesting'
 },
 [productReleaseUpdated]: (state, action) => {
   state.updatingState = 'success';
   state.productReleases = state.productReleases.map(productRelease => {
     

 (productRelease.id === action.payload.productRelease.id)
       

 productRelease;
   });
 },
 [productReleaseUpdatingError]: (state, action) => {
   state.updating = 'failed';
   state.error = action.payload.error;
 },
});

Ko'rib turganimizdek, createAction va createReducer funktsiyalaridan foydalanish ortiqcha kod yozish muammosini sezilarli darajada hal qiladi, ammo konstantalarni oldindan yaratish muammosi hali ham saqlanib qolmoqda. Shuning uchun, avlodni va harakat yaratuvchilarni va redücerni birlashtirgan yanada kuchli variantni ko'rib chiqing — createslice funktsiyasi.

Kirish parametrlari sifatida Create Slice funksiyasi quyidagi maydonlar bilan obyektni qabul qiladi:

Funktsiyaning natijasi quyidagi maydonlarga ega bo'lgan "kesish" deb nomlangan ob'ektdir:

Muammoni hal qilish uchun ushbu funktsiyadan foydalanib, biz quyidagi manba kodini olamiz:

 productReleases = createSlice({
 name: 'productReleases',
 initialState,
 reducers: {
   productReleasesFetching: (state) => {
     state.fetchingState = 'requesting';
   },
   productReleasesFetched: (state, action) => {
     state.productReleases = action.payload.productReleases;
     state.fetchingState = 'success';
   },
   productReleasesFetchingError: (state, action) => {
     state.fetchingState = 'failed';
     state.error = action.payload.error;
   },

…

   productReleaseUpdating: (state) => {
     state.updatingState = 'requesting'
   },
   productReleaseUpdated: (state, action) => {
     state.updatingState = 'success';
     state.productReleases = state.productReleases.map(productRelease => {
       

 (productRelease.id === action.payload.productRelease.id)
         

 productRelease;
     });
   },
   productReleaseUpdatingError: (state, action) => {
     state.updating = 'failed';
     state.error = action.payload.error;
   },
 },
});

Endi biz yaratilgan bo'limdan harakatlar yaratuvchilari va redücerni chiqaramiz.

const { actions, reducer } = productReleases;

export const {
  productReleasesFetched, productReleasesFetching,
  productReleasesFetchingError,
…
  productReleaseUpdated,
  productReleaseUpdating, productReleaseUpdatingError
} = actions;

export default reducer;

API o'z ichiga olgan harakatlar yaratuvchilarining manba kodi o'zgarmadi, faqat harakatlar yuborilganda parametrlarni uzatish usuli bundan mustasno:

 fetchProductReleases = () => (dispatch) => {
 dispatch(productReleasesFetching());
 

 productReleasesService
   .getProductReleases()
   .then((productReleases) => dispatch(productReleasesFetched({ productReleases })))
   .catch((error) => {
     error.clientMessage = "Can't get product releases";
     dispatch(productReleasesFetchingError({ error }));
   });
};

…



 updateProductRelease = (id, productName, productVersion, releaseDate) => (dispatch) => {
 dispatch(productReleaseUpdating());
 

 productReleasesService
   .updateProductRelease(id, productName, productVersion, releaseDate)
   .then((productRelease) => dispatch(productReleaseUpdated({ productRelease })))
   .catch((error) => {
     error.clientMessage = "Can't update product releases";
     dispatch(productReleaseUpdatingError({ error }));
   });

Yuqoridagi kod shuni ko'rsatadiki, createSlice funktsiyasi Redux bilan ishlashda shablon kodida katta qismidan xalos bo'lishga imkon beradi, bu nafaqat kodni yanada ixcham, ixcham va tushunarli qilish, balki uni yozishga kamroq vaqt sarflash imkonini beradi.

Ushbu maqolaning oxirida shuni aytmoqchimanki, Redux Toolkit kutubxonasi state boshqarish uchun yangi hech narsa qo'shmasa ham, kod yozish uchun bir qator qulay vositalarni taqdim etadi.oldingisiga qaraganda. Ushbu vositalar kutubxonada ilgari yaxshi tashkil etilgan bir qator vositalar mavjudligi sababli nafaqat ishlab chiqish jarayonini yanada qulay, tushunarli va tezkor, balki samaraliroq qilish imkonini beradi. Biz, chet elda, dasturiy mahsulotlarimizni ishlab chiqishda ushbu kutubxonadan foydalanishni davom ettirishni va veb-texnologiyalar sohasidagi yangi istiqbolli ishlanmalarni kuzatishni rejalashtirmoqdamiz.

Redux Toolkit qo'llanma

Samar Badriddinov