Gérez votre application React avec Redux et Redux Toolkit

Découvrez les web services

À partir du moment où votre application est connectée, c'est-à-dire qu’elle interagit avec un service distant, elle utilise des web services. Les web services peuvent être sous plusieurs formes : des requêtes API REST, une API GraphQL, ou des websockets.  Cela peut être pour accéder à un compte utilisateur, récupérer la liste de messages actualisée d’un blog, ou consulter les notifications, par exemple.

Dès qu’elle consomme de la donnée à partir à partir d'un autre serveur ou service, ou qu'elle y exécute une action, notre application fait appel de manière asynchrone à des web services.

Cela tombe à pic ! Nous venons de voir comment gérer les asynchrones grâce aux thunks  .

Dans les parties suivantes, nous allons d’abord utiliser fetch  , l’outil standard pour exécuter nos appels de données. Puis, nous utiliserons un outil de Redux Toolkit, Query, qui va nous permettre de créer des configurations complètes d’appels API.

Utilisez fetch  pour appeler une API

Pour exécuter des appels API pour notre store, nous pouvons utiliser fetch  et les thunks  .

Nous allons apprendre à le faire en mettant en place une fonctionnalité de notre application qui permettra de savoir si les produits sont disponibles, et si ce n’est pas le cas, nous rendrons la commande inactive pour ceux-ci.

Vous avez sans doute déjà remarqué les vignettes “Victime de son succès” dans les fast-foods. Eh bien, c’est ce que nous allons faire !

Nous allons donc ajouter une slice features/menu/menuSlice.js  , un thunk  ‘getUnavailableThunk’,  et appeler ce dernier au montage de notre composant features/menu/Menu.js  .

Ce thunk va exécuter une requête GET sur notre fichier /unavailable.json  avec fetch et nous insérera son contenu dans notre state après avoir sérialisé la réponse avec fetch.json()  .

Puis, nous allons ajouter un selector getUnavailableProducts  qui nous retournera la liste des produits non disponibles. Nous ajoutons la propriété unavailable à notre composant ProductCard  en mettant true  si notre produit est dans la liste des produits non disponibles, false  dans le cas contraire.

C’est parti pour ajouter notre slice au store, je vous propose le screencast suivant pour ce faire :

Nous ajoutons ceci à  app/selectors.js  :

export const getUnavailableProducts = (state) => state?.menu?.unavailableProducts

Nous ajoutons ceci à  app/store.js  :

reducer: combineReducers({
    owner: ownerSlice.reducer,
    list: cartSlice.reducer,
    menu: menuSlice.reducer,
}),

Nous modifions  features/menu/Menu.js  :

import { useDispatch, useSelector } from 'react-redux';
import * as ProductList from '../../common/models';
import { ProductCard } from '../../common/components/ProductCard';
import { addProductThunk } from '../cart/cartSlice';
import { useEffect } from 'react';
import { getUnavailableThunk } from './menuSlice';
import { getUnavailableProducts } from '../../app/selectors';

export const Menu = () => {
const dispatch = useDispatch();
const unavailableProducts = useSelector(getUnavailableProducts)

useEffect(() => {
  dispatch(getUnavailableThunk())
}, [])
return <div className="Menu">
{
Object.values(ProductList).map(product => <ProductCard unavailable={unavailableProducts?.includes(product.title)} key={product.name} product={product} onSelect={() => dispatch(addProductThunk(product))} />
}
</div>
}

Nous ajoutons features/menu/menuSlice.js  :

import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";

export const getUnavailableThunk = createAsyncThunk( 'cart/getUnavailableThunk' , async (thunkApi) => {
return await (async () => {
const response = await fetch('https://gist.githubusercontent.com/techerjeansebastienpro/f28e00c733c8e0b3fda7718072076ff3/raw/7fd0e66c68afeea5171255396d7e04493a457e50/unavailable.json');
  return await response.json();
})()
})

export const menuSlice = createSlice({
  name: 'menu',
    initialState: {
    unavailableProducts: []
  },
  reducers: {},
    extraReducers: (builder) => {
    builder.addCase(getUnavailableThunk.fulfilled, (state, action) => {
      return {...state, unavailableProducts: action.payload};
    })
  }
})

Simplifiez vos appels API avec Query

Devinez quoi !

Eh oui ! Vous l’avez deviné. 😅

Cet outil c’est Query ! Il permet de configurer nos calls API et de gérer plusieurs aspects à notre place, comme le cache, la gestion d’erreur, le polling ; très utile quand on veut actualiser automatiquement des données à intervalle régulier.

Query, via la fonction createApi  , va générer à notre place tous les outils pour notre store, comme le reducer, la définition des actions ou thunks  , la définitions des selectors… les briques indispensables si on veut aller vite en utilisant les webservices.

Pour utiliser Query, on utilise la méthode createApi  de  @reduxjs/toolkit/query  comme ce qui suit :

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

const api = createApi({
    baseQuery: fetchBaseQuery({ baseUrl: 'BASE_URL' }),
    endpoints: (builder) => ({
        myEndpoint: builder.query({
            query: (id) => `path/${id}`,
        }),
    }),
})

Tout plein d’outils que nous ne verrons malheureusement pas, mais que vous aurez sans doute le plaisir d’utiliser.

Ce que nous allons voir ici, c’est comment poser les bases avec Query, et pour cela, je vous propose de réaliser ce qui suit.

Nous allons ensemble mettre en place une fonctionnalité qui va permettre à l’utilisateur de récupérer son solde de compte fidélité.

Nous allons donc créer un nouveau composant, features/fidelity/Fidelity.js  , que nous ajouterons à notre fichier app/App.js  , et ajouter un dossier services  dans lequel nous allons créer une API avec Query pour rechercher la valeur via une requête HTTP dans le fichier  services/fidelityApi.js  .

Suivez le screencast suivant pour voir comment j’implémente tout ça.

En conclusion

Notre application mérite d’aller plus loin, comme vous : vous pouvez encore approfondir Redux et Redux Toolkit, qui je l’espère, vous aideront à concrétiser beaucoup de projets bluffants.

Nous avons vu les bases de Redux, en passant par l’architecture Flux pour centraliser nos données avant d’ajouter Redux à React. Puis, nous avons vu ce que Redux Toolkit apporte pour rendre votre code plus efficace ! Enfin, nous venons de voir comment consommer des appels API grâce au store.

Vous avez maintenant tout ce qu’il faut pour mettre en place votre store et exploiter le potentiel de Redux.

C’est à vous de jouer !

En résumé

• Les web services nous permettent d’ajouter des données et d’exécuter des actions distantes de manière dynamique.

• Les thunks  peuvent être utilisés pour faire appel à des web services avec fetch  .

• L’outil Query de Redux Toolkit nous fournit une configuration complète des appels aux web services.

Ça y est, vous avez terminé ce cours - enfin, presque ! Il vous reste un dernier quiz pour valider tout ce que vous avez appris.