Ndryshimi i Strukturës së State në Redux

Faza e parë, që do të implementojmë për ndërveprimin e aplikacionit tonë Redux me ndonjë server të jashtëm - është marrja e të dhënave që ruhen në të gjatë nisjes së aplikacionit. Por para kësaj, le të bëjmë disa ndryshime në aplikacionin tonë.

Le të hapim aplikacionin tonë me produktet, dhe në të skedarin productsSlice.js. Vini re përcaktimin e initialState. Fillimisht slice-i ynë me produktet productsSlice - është një array, në të cilin ka objekte (në rastin tonë dy) me të dhëna produktesh. Së pari, meqë tani do t'i ngarkojmë nga serveri, duhet t'i heqim nga initialState. Së dyti, do të dërgojmë në server kërkesa API dhe do të jetë e rëndësishme të dimë për statusin e tyre. Duke marrë parasysh këto dy gjëra, le të rikrijojmë initialState. Le të jetë tani thjesht një objekt me fushat products (fillimisht këtu nuk do të ketë të dhëna, por thjesht një array bosh), status dhe error. Tani kodi ynë për initialState do të bëhet pak më i shkurtër:

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

Tani për tani kemi vendosur statusin 'idle' (papunë), sepse fillimisht nuk dërgojmë asnjë kërkesë, por në përgjithësi ai do të ndryshojë dhe mund të marrë vlerat 'loading', 'succeeded', 'failed'. Mbani mend se për të shënuar statusin ju mund të zgjidhni ato emra që do të jenë të përshtatshëm për ju.

Zbresim më poshtë sipas kodit. Pas ndryshimit të initialState, duhet të ndryshojmë edhe kodin, në të cilin punojmë me këtë state në funksionet-reduxer. Le të shohim kodin për productAdded:

state.push(action.payload)

Tani produktet e reja do t'i vendosim jo thjesht në state për produktet, por në pronën e tij state.products. Prandaj, le të zëvendësojmë rreshtin e mësipërm me:

state.products.push(action.payload)

Prandaj, le të bëjmë të njëjtat ndryshime për redukserin reactionClicked. Në vend të:

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

Tani do të jetë:

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

Zëvendësoni vetë state me state.products dhe në kodin e redukserit productUpdated.

Hapni aplikacionin tuaj me studentët. Hapni në të skedarin studentsSlice.js. Le të ketë tani initialState juaj tre pronësi: students, status, error - rindërrojeni atë, siç tregohet në mësim.

Bëni ndryshimet përkatëse dhe më poshtë sipas kodit. Zëvendësoni state me state.students në kod për tre funksionet tuaja-reduxer.