Réducteur et action dans Redux

Lors de la leçon précédente, nous avons terminé le formulaire pour ajouter un produit et l'avons affiché sur la page d'accueil. Mais pour l'instant, les données ajoutées ne sont pas sauvegardées, en d'autres termes, le nouveau produit n'est pas ajouté à ceux existants dans le store. Corrigeons cela.

Pour commencer, dans notre application de produits, nous allons ouvrir le fichier productsSlice.jsx et écrire dans la propriété reducer pour createSlice la fonction productAdded, qui sera chargée d'ajouter le produit dans le store sur la base de l'état actuel et de l'action qui lui sont transmis. Il est important de noter que ce n'est pas tout le state qui nous est transmis, mais seulement la partie qui est responsable des produits (la tranche products ne connaît qu'elle). L'objet du nouveau produit se trouvera dans la propriété payload de l'objet action, qui sera généré par le gestionnaire lors du clic sur le bouton de sauvegarde dans le formulaire. En conséquence, le réducteur productAdded ressemblera dans le code de createSlice à ceci :

const productsSlice = createSlice({
	name: 'products',
	initialState,
	reducers: {
		productAdded(state, action) {
			state.push(action.payload)
		},
	},
})

Et l'action ? Tout au début du tutoriel, nous avons mentionné qu'une action est un événement quelconque, représenté sous la forme d'un objet, décrivant ce qui s'est passé dans l'application. Nous avons également parlé du fait que l'on peut utiliser une fonction action creator, qui va nous créer un tel objet, par exemple comme ceci :

const addProduct = newProduct => {
	return {
		type: 'products/productAdded',
		payload: newProduct
	}
}

La bonne nouvelle est que nous n'avons rien besoin de faire, car la fonction createSlice le fera pour nous. Dès que nous avons écrit le reducer, elle créera automatiquement pour nous l'action creator portant le même nom. Il ne nous reste plus qu'à exporter l'action creator obtenu pour une utilisation ultérieure dans les composants. Faisons cela à la fin du fichier avant l'export du réducteur, comme ceci :

export const { productAdded } = productsSlice.actions
export default productsSlice.reducer

Ouvrez votre application avec les étudiants, puis le fichier studentsSlice.jsx, complétez la valeur du champ reducer pour createSlice, comme montré dans la leçon.

Ajoutez à la fin du fichier studentsSlice.jsx l'export de la fonction action creator obtenue.