Ajout d'un autre slice dans Redux

Lors des leçons précédentes, nous avons travaillé intensément sur le slice products pour les produits. Dans une véritable application Redux, l'état peut contenir de nombreux slices pour différents besoins. C'est pourquoi dans cette leçon nous ajouterons à l'état un autre slice pour les vendeurs, qui seront ceux qui ajouteront effectivement les produits dans notre application.

Ouvrons notre application avec les produits et la première chose que nous ferons, c'est dans le dossier parts de créer un autre dossier sellers, ici nous placerons tout le code et les composants concernant les vendeurs.

Maintenant, comme pour les produits, créons un slice pour les vendeurs. Pour commencer, dans le dossier sellers créons le fichier sellersSlice.js et importons-y createSlice :

import { createSlice } from '@reduxjs/toolkit'

Nous continuons les étapes standard. En tant que valeur initiale pour le slice, créons quatre vendeurs. Pour simplifier, ils auront deux champs - id et name :

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

Ci-dessous, à l'aide de createSlice, créons le slice sellers, passons-lui la valeur initiale. Étant donné que nous n'ajouterons pas de vendeurs, ni ne mettrons à jour leurs données par la suite, laissons le champ des réducteurs vide pour l'instant :

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

À la fin du fichier, n'oublions pas l'export du réducteur obtenu :

export default sellersSlice.reducer

Maintenant, nous devons ouvrir le fichier store.js dans le dossier app et importer le réducteur obtenu :

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

Et ensuite l'assigner dans configureStore en tant que réducteur pour sellers :

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

Ouvrez votre application avec les étudiants. Créez un autre dossier teachers, ici vous aurez les fichiers de code concernant les enseignants. Créez-y le fichier teachersSlice.js. En utilisant les matériaux de la leçon, créez-y le slice teachers à l'aide de createSlice.

Que chaque objet avec les données d'enseignant ait trois propriétés : id, name (qui contiendra le nom de famille et les initiales, par exemple 'Pétrov A.V.') et la matière (n'importe laquelle, celle que vous inventerez - physique, mathématiques, biologie, etc.). Créez 3 de ces objets avec des enseignants en tant que valeur initiale pour le slice.

Importez le réducteur obtenu teachersReducer dans store.js et assignez-le en tant que réducteur pour teachers, comme montré dans la leçon.