Terminologie de base dans Redux

Dans cette leçon, nous passerons brièvement en revue les concepts et termes principaux, dont la maîtrise est nécessaire pour l'étude ultérieure de Redux.

Commençons par l'action. Il s'agit d'un événement qui décrit ce qui s'est passé dans notre application. Techniquement, c'est un simple objet JavaScript, contenant un champ type, dans lequel nous écrivons le nom de l'action.

Le deuxième champ important de l'objet d'action est le champ payload. Il contiendra la charge utile de l'action. La charge utile désigne des données qui sont transmises en paramètres à l'action.

Cet objet peut également contenir d'autres champs avec des informations supplémentaires.

Prenons par exemple la création d'une action et appelons-la addOrderAction. Supposons qu'elle soit responsable de l'ajout d'une commande. Donc dans la propriété type, nous indiquerons que la commande est ajoutée (orderAdded) aux commandes (orders). Et dans payload, nous préciserons quelle commande, par exemple - peindre un mur :

const addOrderAction = {
	type: 'orders/orderAdded',
	payload: 'Paint a wall'
}

Pour ne pas avoir à écrire manuellement l'objet d'action à chaque fois, nous pouvons utiliser ce qu'on appelle un action creator - une fonction qui va créer et nous retourner l'objet d'action. Appelons-la addOrder. Nous lui transmettrons en paramètre le texte souhaité pour la propriété payload :

const addOrder = text => {
	return {
		type: 'orders/orderAdded',
		payload: text
	}
}

Le concept suivant important dans la chaîne est le reducer - une fonction qui prend l'état actuel et l'objet d'action. Cette fonction décide comment mettre à jour l'état et retourne l'état déjà mis à jour, si nécessaire.

Le concept suivant est le store - c'est un objet dans lequel est stocké l'état global actuel de l'application Redux. Cet objet possède une méthode getState, grâce à laquelle on peut obtenir la valeur actuelle de l'état.

Le store a également une méthode dispatch. L'appeler et lui passer un objet d'action est la seule façon de modifier l'état. En conséquence, le store exécutera la fonction reducer et sauvegardera la nouvelle valeur de l'état.

Et le dernier concept que nous examinerons dans cette leçon est celui des sélecteurs. Les sélecteurs sont des fonctions spéciales, qui savent comment extraire des informations de l'état situé dans le store. Ces fonctions s'avèrent particulièrement utiles lors de la croissance de l'application et aident à éviter la duplication de code.

Nous en apprendrons plus sur tous ces concepts et sur leur application pratique dans les prochaines sections de ce tutoriel.