Иловагии редюсерҳо дар Redux

Биёед барномаи мо бо маҳсулотро кушоем, ва дар он файли productsSlice.js-ро. Шояд шумо дидед, ки мо thunk-и fetchProducts чун функсияи ҷудогона сохтем? Мо инро чунин кардем, зеро ки createSlice муайян кардани thunks-ро дастгирӣ намекунад. Пас, чӣ гуна дар ин ҳолат редюсери слайси products-ро вазн кунем, то ба экшенҳое, ки берун аз products муайян шудаанд, посух диҳад? Зеро ба мо дақиқан барои коркарди экшенҳо ниёз аст, ки thunk-и fetchProducts мефиристад.

Барои чунин ҳолатҳо дар createSlice хосияти extraReducers мавҷуд аст, ки имкон медиҳад редюсерҳои иловагӣ илова кунед, ки ба навбати худ экшенҳоеро, ки дар ин слайс муайян нашудаанд, кор карда метавонанд.

Ҳоло дар бадани функсияи createSlice пас аз хосияти reducers бо ҳамаи редюсерҳо як усули дигари extraReducers илова кунем:

extraReducers() {},

Ба ин усул мо бояд объекти builder-ро бирасонем, ки усулҳое дорад, бо ёрӣ аз онҳо метавон редюсерҳои иловагиро илова кард:

extraReducers(builder) {},

Мо яке аз усулҳои builder-ро истифода мебарем - addCase, ки параметри якум action creator-ро қабул мекунад, ва параметри дуюм reducer-ро мегирад. Яке аз экшенҳое, ки fetchProducts дар дархост мефиристад ин fetchProducts.pending мебошад, ки ба мо мегӯяд, ки дархост фиристода шуд. Биёед дар ин ҳолат статусро ба 'in progress' иваз кунем (то ин дафъа он 'idle' буд):

extraReducers(builder) {
	builder.addCase(fetchProducts.pending, (state) => {
		state.status = 'in progress'
	})
},

Ҳоло экшене, ки дар сурати дархости муваффақ фиристода мешавад, кор кунем. Дар ин ҷо мо на танҳо статусро дар стейт ба 'success' иваз мекунем, балки маҳсулотро низ аз payload экшен ба слайси products мегирем. Барои ҷамъ кардани ҳамаи маҳсулот ба мо усули concat лозим аст:

extraReducers(builder) {
	builder
		.addCase(fetchProducts.pending, (state) => {
			state.status = 'in progress'
		})
		.addCase(fetchProducts.fulfilled, (state, action) => {
			state.status = 'success'
			state.products = state.products.concat(action.payload)
		})
},

Дар сурати дархости номуваффақ мо статусро ба 'fail' иваз мекунем ва дар стейт паёми хаторо сабт мекунем:

.addCase(fetchProducts.rejected, (state, action) => {
	state.status = 'fail'
	state.error = action.error.message
})

Агар мо ҳоло барномаамонро оғоз кунем ва дар меню ба 'Products' клик кунем, пас пас аз чанд сония (дар хотир доред, ки таъхирро, ки мо дар сервер таъин кардем?) мо рӯйхати маҳсулотро хоҳем дид.

Ҳамин тавр мо тағиротро дар Redux DevTools хоҳем дид. Ҳоло маҳсулоти мо дар стейт низ пайдо мешаванд (варақаи 'State'-ро бубинед), агар шумо ба экшени products/fetchProducts/fulfilled клик кардед. Дар он ҷо статуси нави 'success' низ пайдо мешавад. Ҳоло ба экшени products/fetchProducts/pending клик кунед ва бубинед, ки варақаи 'State' чӣ гуна фарқ мекунад.

Ягона лаҳзаи нороҳат, ки шумо метавонед бо он рӯ ба рӯ шавед (ман дар бораи ин дар дарси гузашта сухан гуфтам) - ин такрори дархости додаҳо мебошад. Дар натиҷа, дар рӯйхати мо на 8, балки тамоми 16 маҳсулот ва огоҳиҳои критикӣ дар консоли барномасоз пайдо мешаванд. Биёед дар дарси оянда бо ин кор кунем.

Барномаи худро бо донишҷӯён кушоед. Дар он файли studentsSlice.js-ро кушоед. Дар бадани функсияи createSlice пас аз хосияти reducers хосияти extraReducers-ро илова кунед. Ба усули extraReducers builder-ро бирасонед.

Бо ёрии усули builder.addCase коркарди экшенҳои pending, fulfilled ва rejected-ро илова кунед, ки fetchStudents ҳангоми дархости додаҳо мефиристад, тавре ки дар дарс нишон дода шуд.