Ajout d'une slice dans Redux

Nous avons préparé les outils principaux pour créer notre application Redux, maintenant nous pouvons passer directement à la mise en œuvre de ses composants.

Dans cette leçon, nous commencerons par le concept de slices (slices). Une application Redux a un état global unique qui est stocké dans le store. Cet état est divisé en slices. En fait, une slice est un morceau du store, contenant l'état initial, la logique du réducteur et des actions pour une partie spécifique de l'application.

Notre application comportera des produits, par conséquent la première slice, que nous créerons, contiendra des informations sur les produits. Aussi, lors de la création d'une slice, il est nécessaire d'ajouter un réducteur qui sait comment traiter ces informations.

Allons dans le dossier src et créons un dossier parts, puis dedans un dossier products - ici nous mettrons tous les fichiers de code relatifs aux produits. Dans le dossier products nous créerons un fichier productsSlice.js, puis nous importerons dedans depuis RTK la fonction createSlice, à l'aide de laquelle nous créerons les slices :

import { createSlice } from '@reduxjs/toolkit'

Maintenant, créons une slice pour les produits et nommons-la 'products'. Pour la propriété reducers nous laisserons pour l'instant des accolades vides :

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

Nous devons également définir initialState - l'état initial de la slice de l'état, qui sera chargé au premier démarrage de l'application. Écrivons-le immédiatement après l'importation et avant la création de la slice. Que ce soit un tableau de quelques objets, contenant les données des produits. Spécifions pour chaque produit un id, un titre, une description, un prix et une quantité :

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

À la fin du code du fichier, nous prendrons le réducteur généré par le résultat de la fonction createSlice et nous l'exporterons. Il nous sera utile dans d'autres fichiers de l'application :

export default productsSlice.reducer

Ouvrez votre application pour les étudiants. Créez-y un fichier studentsSlice.js, comme décrit dans la leçon. Créez-y à l'aide de createSlice une slice students. En tant que valeur initiale de la slice, laissez vous avoir un tableau de quelques objets contenant les données des étudiants.

Pour chaque étudiant, faites les champs : id, prénom, nom, âge et spécialité.

À la fin du fichier studentsSlice.js exportez le réducteur obtenu, comme décrit dans la leçon.