Dodawanie slice'a w Redux

Przygotowaliśmy główne narzędzia do tworzenia naszej aplikacji Redux, teraz możemy przejść bezpośrednio do implementacji jej komponentów.

Na tym zajęciu zaczniemy od pojęcia slice'y (slices). Aplikacja Redux ma jeden globalny stan, który jest przechowywany w store. Ten stan jest podzielony na slice'y. Faktycznie, slice to kawałek store'a, zawierający początkowy stan, logikę reducera i akcji dla określonej części aplikacji.

W naszej aplikacji będą występować produkty, odpowiednio pierwszy slice, który zrobimy, będzie zawierał informację o produktach. Również przy tworzeniu slice'a konieczne jest dodanie reducera, który wie, jak przetwarzać tę informację.

Wejdźmy do folderu src i utwórzmy folder parts, a następnie w nim folder products - tutaj będziemy składać wszystkie pliki z kodem, odnoszące się do produktów. W folderze products utworzymy plik productsSlice.js, a następnie zaimportujemy w nim z RTK funkcję createSlice, za pomocą której będziemy tworzyć slice'y:

import { createSlice } from '@reduxjs/toolkit'

Teraz stwórzmy slice dla produktów i nazwijmy go 'products'. Dla właściwości reducers na razie zostawmy puste nawiasy klamrowe:

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

Również konieczne jest zdefiniowanie initialState - początkowego stanu slice'a stanu, który zostanie załadowany przy pierwszym uruchomieniu aplikacji. Napiszmy go od razu po imporcie i przed utworzeniem slice'a. Niech to będzie tablica z parą obiektów, zawierających dane produktów. Wskażmy dla każdego produktu id, nazwę, opis, cenę i ilość:

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',
	},
]

Na końcu kodu pliku z wyniku pracy funkcji createSlice weźmiemy wygenerowany przez nią reducer i wyeksportujemy go. Przyda się on nam w innych plikach aplikacji:

export default productsSlice.reducer

Otwórz twoją aplikację dla studentów. Utwórz w niej plik studentsSlice.js, jak opisano w lekcji. Utwórz w nim przy pomocy createSlice slice students. Jako początkową wartość slice'a niech u ciebie będzie tablica z parą obiektów, zawierających dane studentów.

Dla każdego studenta zrób pola: id, imię, nazwisko, wiek i specjalność.

Na końcu pliku studentsSlice.js wyeksportuj otrzymany reducer, jak opisano w lekcji.