Dodawanie kolejnego slice'a w Redux

Na poprzednich zajęciach intensywnie pracowaliśmy nad slice'em products dla produktów. W prawdziwej aplikacji Redux w stanie może być wiele slice'ów do różnych celów. Dlatego na tej lekcji dodamy do state jeszcze jeden slice dla sprzedawców, którzy faktycznie będą dodawać produkty w naszej aplikacji.

Otwórzmy naszą aplikację z produktami i pierwsza rzecz, którą zrobimy, to w folderze parts utworzymy jeszcze jeden folder sellers, tutaj będziemy umieszczać cały kod i komponenty, dotyczące sprzedawców.

Teraz, tak jak w przypadku produktów, stwórzmy slice dla sprzedawców. Na początek w folderze sellers utwórzmy plik sellersSlice.js i zaimportujmy do niego createSlice:

import { createSlice } from '@reduxjs/toolkit'

Kontynuujemy standardowe kroki. Jako wartość początkową dla slice'a utwórzmy czterech sprzedawców. Dla prostoty będą mieli dwa pola - id i name:

const initialState = [
	{ id: '0', name: 'Super Power' },
	{ id: '1', name: 'Miracle Life' },
	{ id: '2', name: 'Dolls&Toys' },
	{ id: '3', name: 'Granny' },
]

Poniżej za pomocą createSlice utwórzmy slice sellers, przekażmy mu wartość początkową. Ponieważ nie będziemy ani dodawać sprzedawców, ani aktualizować ich danych w przyszłości, to niech pole z reducerami pozostanie na razie puste:

const sellersSlice = createSlice({
	name: 'sellers',
	initialState,
	reducers: {},
})

Na końcu pliku nie zapomnijmy o eksporcie otrzymanego reducera:

export default sellersSlice.reducer

Teraz musimy otworzyć plik store.js w folderze app i zaimportować otrzymany reducer:

import sellersReducer from '../parts/sellers/sellersSlice'

I następnie przypisać go w configureStore jako reducer dla sellers:

export default configureStore({
	reducer: {
		products: productsReducer,
		sellers: sellersReducer,
	},
})

Otwórz twoją aplikację ze studentami. Utwórz jeszcze jeden folder teachers, tutaj będziesz miał pliki z kodem, dotyczące nauczycieli. Utwórz w nim plik teachersSlice.js. Korzystając z materiałów lekcji, utwórz w nim slice teachers za pomocą createSlice.

Niech każdy obiekt z danymi nauczyciela ma trzy właściwości: id, name (które będzie zawierać nazwisko i inicjały, na przykład 'Nowak A.B.') i przedmiot (dowolny, jaki wymyślisz - fizyka, matematyka, biologia itp.). Utwórz 3 takie obiekty z nauczycielami jako wartość początkową dla slice'a.

Zaimportuj otrzymany reducer teachersReducer do store.js i przypisz go jako reducer dla teachers, jak pokazano w lekcji.