De structuur van de state in Redux aanpassen
De eerste fase die we zullen implementeren voor de interactie van onze Redux-applicatie met een externe server is het ophalen van gegevens die daar zijn opgeslagen bij het opstarten van de applicatie. Maar laten we eerst enkele wijzigingen in onze applicatie aanbrengen.
Laten we onze productenapplicatie openen, en daarin
het bestand productsSlice.js. Let op de
definitie van initialState. Oorspronkelijk is onze slice met
producten productsSlice een array, waarin
objecten staan (in ons geval twee) met gegevens van
producten. Ten eerste, omdat we ze nu gaan
opladen vanaf een server, moeten we ze uit de
initialState halen. Ten tweede zullen we
API-verzoeken naar de server sturen en het is voor ons belangrijk om de status daarvan
te weten. Met deze twee zaken in gedachten, laten we
de initialState aanpassen. Laat het nu
gewoon een object zijn met de velden products
(in eerste instantie staan hier geen gegevens, maar
een lege array), status en error.
Onze code voor initialState wordt nu
een beetje korter:
const initialState = {
products: [],
status: 'idle',
error: null,
}
Voorlopig hebben we de status op 'idle' gezet (inactiviteit),
omdat we aanvankelijk geen
verzoeken sturen, maar over het algemeen zal deze veranderen en kan hij
waarden aannemen zoals 'loading', 'succeeded',
'failed'. Onthoud dat je voor de status
die namen kunt kiezen die
handig voor jou zijn.
We scrollen verder naar beneden in de code. Na de wijziging van
initialState, moeten we ook de code aanpassen waarin
we met deze state werken in de reducer-functies.
Laten we kijken naar de code voor productAdded:
state.push(action.payload)
Nu zullen we nieuwe producten
niet zomaar in de state voor producten stoppen, maar in zijn
eigenschap state.products. Daarom
vervangen we de bovenstaande regel door:
state.products.push(action.payload)
Dienovereenkomstig maken we dezelfde wijzigingen
voor de reducer reactionClicked. In plaats van:
const currentProduct = state.find((product) => product.id === productId)
Wordt het nu:
const currentProduct = state.products.find((product) => product.id === productId)
Vervang zelf state door state.products
in de code van de reducer productUpdated.
Open je applicatie met studenten.
Open daarin het bestand studentsSlice.js.
Laat je initialState nu
drie eigenschappen hebben: students, status,
error - pas het aan, zoals getoond
in de les.
Breng de corresponderende wijzigingen aan in
de code hieronder. Vervang state door
state.students in de code voor je
drie reducer-functies.
