• 15 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 26/08/2020

Appelez les actions dans les reducers

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Lorsque vous commencez à travailler avec les reducers, notez que la structure de votre global state se construira au fur et à mesure du développement de votre application. Ce sont les  reducers, ces fonctions qui prennent une  state  et une   action  en arguments et qui retournent le  state  suivant, qui détermineront la construction progressive de votre arbre.

Pour l'application Todo List que l'on vous fait développer en exemple, il y a 2 grosses parties :
- une partie  todos, qui est un tableau qui définit la liste des todos ;
- une partie qui définit les todos à afficher via  visibilityFilter.

Un state global à un instant donné ressemblerait donc à :

{
todos: [
{
id: 1,
text: 'Apprendre à utiliser Redux.',
cat: 'learn',
completed: false,
},
{
id: 2,
text: 'Savoir quand est-ce que nous pouvons utiliser Redux.',
cat: 'default',
completed: false,
},
{
id: 3,
text: 'Apprendre à utiliser React.',
cat: 'learn',
completed: true,
}
],
visibilityFilter: 'SHOW_COMPLETED'
}

Maintenant que l'on sait à quoi ressemble notre gros objet global state, on peut commencer à écrire notre premier  reducer.

Nous verrons dans la dernière partie de ce cours comment faire appel à une API.

Pour le moment, nous allons commencer par écrire le  reducer  de  visibilityFilter. Pour ceci, cependant... vous souvenez-vous ce qu'un  reducer  prend comme arguments ? Oui, il prend un  state  et une  action. Or, nous n'avons jusqu'ici défini que l'action   setVisibilityFilter, mais nous n'avons pas encore défini de  state.

Nous retournons donc dans le dossier  /src/constants  afin de définir les  state  possibles de  visibilityFilter  dans un fichier  TodoFilters.js  :

export const SHOW_ALL = 'SHOW_ALL'
export const SHOW_COMPLETED = 'SHOW_COMPLETED'
export const SHOW_ACTIVE = 'SHOW_ACTIVE'

Notez que ces constantes définissent le  type  des  actions. On définit des constantes égales aux chaînes de caractères pour les mêmes raisons, c'est-à-dire simplifier le débug des erreurs et centraliser tous les states, mais il ne s'agit pas de la même chose.

Le code du reducer que l'on mettra dans  /src/reducers/visibilityFilter.js  ressemble à ceci :

import { SET_VISIBILITY_FILTER } from '../constants/ActionTypes'
import { SHOW_ALL } from '../constants/TodoFilters'
const visibilityFilter = (state = SHOW_ALL, action) => {
switch (action.type) {
case SET_VISIBILITY_FILTER:
return action.filter
default:
return state
}
}
export default visibilityFilter

Analysons la structure de ce reducer :

  • le fichier commence par les  imports  du  state  et de l'action  qui seront appelés en arguments dans le  reducer  ;

  • étant donné que le  reducer  est une fonction pure, il est défini en tant que  const  et prend pour argument  SHOW_ALL  et une  action  qui peut être quelconque ;

  • on fait un  switch  sur le  type  de l'action  pour vérifier que l'action  en question est bien  SET_VISIBILITY_FILTER  et que le  state  retourné est le  filter, argument de l'action  définie dans la précédente partie ;

  • un fallback via  default  est prévu et retourne le  state  d'origine si jamais l'action  est tout sauf  SET_VISIBILITY_FILTER

  • enfin, un  export  du  reducer  est prévu pour l'appeler dans un autre fichier, dans le  combineReducer()

Nous allons immédiatement préparer le "reducer global" qui regroupera tous les  reducers  de notre code. Toujours dans le dossier  reducers, créons un fichier  index.js  qui contient :

import { combineReducers } from 'redux'
import todos from './todos'
import visibilityFilter from './visibilityFilter'
const rootReducer = combineReducers({
todos,
visibilityFilter,
})
export default rootReducer

Le code est très court et relativement simple : on importe la fonction  combineReducer  issue de la bibliothèque Redux, ainsi que les  reducers   présents dans le même dossier. Enfin, on combine les deux  reducers  en question grâce à  combineReducer(), puis on exporte le tout !

Nous vous proposons maintenant, via un exercice pratique, de créer un  reducer  appelé par ce  combineReducers(), mais manquant dans notre arborescence qui est  todos.

Voici un exercice guidé pour vous entraîner !

Exemple de certificat de réussite
Exemple de certificat de réussite