Redux да стейт структурасини ўзгартириш

Бизнинг Redux иловамизнинг ташқи сервер билан ўзаро алокасини амалга ошириш учун биринчи босқич - бу илова ишга тушганида серверда сақланган маълумотларни олиш. Аммо аввал биз иловамизга баъзи ўзгартиришлар киритамиз.

Махсулотлар билан илованимизни очайлик, унда productsSlice.js файлини ochamiz. initialState аниқланишига эътибор беринг. Дарславки бизнинг махсулотлар слайсимиз productsSlice - бу махсулотлар маълумотлари билан иккита объект бор массив. Биринчидан, энди биз уларни сервердан юклайдиган бўлганимиз сабабли, уларни initialState дан олиб ташлашимиз керак. Иккинчидан, биз серверга API сўровлари юборамиз ва уларнинг статусини билишимиз мухим бўлади. Бу икки нарсани инобатга олган ҳолда, келинг initialState ни қайта ясайлик. Энди бу products (дарславки эч қандай маълумот бўлмаган бўш массив), status ва error майдонлари бўлган оддий объект бўлсин. Энди бизнинг initialState учун код бир оз қисқарок бўлади:

const initialState = {
	products: [],
	status: 'idle',
	error: null,
}

Ҳозирча биз статусни 'idle' (ҳаракатсизлик) деб белгиладок, чунки дарславки биз ҳеч қандай сўров юбормаймиз, аммо у ўзгариши мумкин ва 'юкланмокда', 'бажарилди', 'юклаш хатоси' қийматларини қабул қилиши мумкин. Эсда тутингиз, статусни белгилаш учун сизга қулай бўлган номларни танлашингиз мумкин.

Код бўйича пастга тушамиз. initialState ўзгарганидан сўнг, биз стейт билан ишлайдиган редьюсер функцияларимиздаги кодни ҳам ўзгартиришимиз керак. productAdded учун кодга қараймиз:

state.push(action.payload)

Энди янги махсулотларни биз oddiygina махсулотлар учун стейтга эмас, балки унинг state.products хусусиятига joylayмиз. Шу sababli, юқорида кўрсатилган сатрни quyidagicha almashtiramiz:

state.products.push(action.payload)

Мос равишда, reactionClicked редьюсери учун ҳам шу ўзгартиришларни бажарамиз. Бунинг ўрнига:

const currentProduct = state.find((product) => product.id === productId)

Энди бўлади:

const currentProduct = state.products.find((product) => product.id === productId)

productUpdated редьюсери кодида state ни state.products га ўзгартиришни ўзингиз бажаринг.

Студентлар билан иловангизни oching. Унда studentsSlice.js файлини oching. Энди сизнинг initialState ингиз учта хусусиятга эга бўлсин: students, status, error - уни дарсда кўрсатилганидек қайта ясангиз.

Мос ўзгартиришларни кодда ҳам пастрок бажаринг. Ҳар учта редьюсер функцияларингиз кодида state ни state.students га алмаштиринг.