Verandering van staatstruktuur in Redux

Die eerste fase wat ons sal implementeer vir die interaksie van ons Redux-aansoek met 'n eksterne bediener - dit is die verkryging van data wat daarin gestoor word wanneer die aansoek begin. Maar laat ons eers 'n paar veranderinge aanbring in ons aansoek.

Laat ons ons produk-aansoek oopmaak, en daarin die lêer productsSlice.js. Let op die definisie van initialState. Oorspronklik is ons snit met produkte productsSlice - 'n skikking waarin daar voorwerpe is (in ons geval is daar twee) met data van die produkte. Eerstens, aangesien ons dit nou sal laai vanaf die bediener, moet ons dit uit die initialState verwyder. Tweedens, ons sal API-versoeke na die bediener stuur en dit sal vir ons belangrijk wees om die status daarvan te ken. Met inagneming van hierdie twee dinge, laat ons die initialState omskep. Laat dit nou eenvoudig 'n voorwerp wees met die velde products (oorspronklik sal hier geen data wees nie, maar bloot 'n leë skikking), status en error. Nou sal ons kode vir initialState 'n bietjie korter word:

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

Vir nou het ons die status as 'idle' gestel (niksdoen), aangesien ons aanvanklik geen versoeke stuur nie, maar oor die algemeen sal dit verander en kan die waardes 'laai', 'voltooi', 'laaifout' aanneem. Onthou dat jy vir die aanduiding van status die name kan kies wat vir jou gerieflik is.

Laat ons verder afgaan in die kode. Na die verandering van initialState, moet ons ook die kode verander waar ons met hierdie staat werk in die reducersfunksies. Laat ons kyk na die kode vir productAdded:

state.push(action.payload)

Nou sal ons nuwe produkte plaas nie eenvoudig in die state vir produkte nie, maar in sy eienskap state.products. Daarom, vervang ons bogenoemde reël met:

state.products.push(action.payload)

Gevolglik, laat ons dieselfde veranderinge doen vir die reducer reactionClicked. In plaas van:

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

Sal dit nou wees:

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

Vervang self state met state.products in die kode van die reducer productUpdated.

Maak jou aansoek met studente oop. Maak die lêer studentsSlice.js daarin oop. Laat jou initialState nou drie eienskappe hê: students, status, error - herskep dit, soos getoon in die les.

Bring die ooreenstemmende veranderinge ook laer in die kode aan. Vervang state met state.students in die kode vir jou drie reducersfunksies.