Redux-siivun lisääminen

Olemme valmistelleet päätyökalut Redux-sovelluksemme luomista varten, nyt voimme siirtyä suoraan sen komponenttien toteuttamiseen.

Tällä oppitunnilla aloitamme käsitteestä siivu (slices). Redux-sovelluksessa on yksi globaali tila, joka tallennetaan storeen. Tämä tila pilkotaan siivuihin. Käytännössä siivu on pala storesta, joka sisältää alkutilan, reducerin logiikan ja actionit tiettyä sovelluksen osaa varten.

Sovelluksessamme esiintyy tuotteita, joten ensimmäinen siivu, jota teemme, sisältää tietoa tuotteista. Myös siivun luomisen yhteydessä on lisättävä reducer, joka tietää, kuinka käsitellä näitä tietoja.

Käydään kansiossa src ja luodaan kansio parts, ja sitten sen sisälle kansio products - tänne keräämme kaikki tuotteisiin liittyvät kooditiedostot. Kansiossa products luomme tiedoston productsSlice.js, ja sitten tuomme siihen RTK:sta funktion createSlice, jonka avulla luomme siivut:

import { createSlice } from '@reduxjs/toolkit'

Luodaan nyt tuotteiden siivu ja nimetään se 'products'. Ominaisuudelle reducers jätämme toistaiseksi tyhjät aaltosulkeet:

const productsSlice = createSlice({
	name: 'products',
	initialState,
	reducers: {}
})

Meidän on myös määritettävä initialState - siivun tilan alkuarvo jonka sovellus lataa ensimmäisen käynnistyksen yhteydessä. Kirjoitetaan se heti importin jälkeen ja ennen siivun luomista. Olkoon se joukko paria objektia, jotka sisältävät tuotetietoja. Määritetään jokaiselle tuotteelle id, nimi, kuvaus, hinta ja määrä:

const initialState = [
	{
		id: '1',
		title: 'Product1',
		desc: 'This is an amazing product',
		price: '300',
		amount: '30',
	},
	{
		id: '2',
		title: 'Product2',
		desc: 'This is a nice product',
		price: '700',
		amount: '12',
	},
]

Tiedoston lopussa otamme funktion createSlice tuloksesta sen generoiman reducerin ja viemme sen. Se on hyödyllinen muissa sovelluksen tiedostoissa:

export default productsSlice.reducer

Avaa opiskelijasovelluksesi. Luo sinne tiedosto studentsSlice.js, kuten oppitunnilla kuvataan. Luo siihen createSlice:n avulla siivu students. Siivun alkuarvoksi olkoon joukko parista objektista, jotka sisältävät opiskelijoiden tietoja.

Tee jokaiselle opiskelijalle kentät: id, etunimi, sukunimi, ikä ja pääaine.

Tiedoston studentsSlice.js lopussa viekää saatu reducer, kuten oppitunnilla kuvataan.