Gérez votre application React avec Redux et Redux Toolkit

Découvrez les slices

Notre application évolue à grands pas ! Nous savons à présent organiser notre store autour des actions et de notre reducer.

Notre base de code devient alors de plus en plus importante. On s’aperçoit que notre fichier app/store.js  pourrait à terme être complet, voire trop complet ! Sa taille va être relative au nombre d’actions que nous allons créer.

Eh bien, c'est ce que nous allons voir maintenant avec le principe des slices (en français, tranches).

Redux Toolkit fournit et encourage l'utilisation de slices d'état, ce qui permet d’organiser l’état en morceaux autonomes et gérables, facilitant la création et la maintenance de l'application.

Notre store peut être composé de ces slices et nous allons pouvoir les associer à nos fonctionnalités en les ajoutant au niveau des dossiers features  .

Ainsi, nous allons avoir une structure comme ci-dessous par feature :

features/
    my-feature/
        MyFeature.js
        myFeatureSlice.js

Voyons tout de suite comment créer nos slices et ce que Redux Toolkit nous apporte.

Organisez le store avec createSlice

Redux Toolkit nous permet donc d’organiser notre store en slices. Nous utiliserons createSlice  pour cela. Cette fonction nous apporte plusieurs choses qui vont simplifier l’implémentation de notre store.

Par exemple, précédemment, nous devions utiliser createAction  et associer nos actions à notre reducer.

Eh bien, createSlice  nous permet de nous en passer.

createSlice  est une fonction de Redux Toolkit qui génère automatiquement des reducers, des actions et des action creators en se basant sur un objet définissant l'état initial et les fonctions réductrices.

Redux Toolkit fait presque le café. 😂

Regardons comment créer notre slice, je vous propose pour cela la vidéo suivante :

Dans ce screencast, nous avons :

• créé notre slice de notre fonctionnalité Cart.js  qui permet de lister les produits sélectionnés ;

• déplacé les actions pour :

  • l’ajout d’un produit, 

  • la suppression d’un produit, 

  • l’ajout de la promo ;

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

export const cartSlice = createSlice({
  name: 'list',
  initialState: {}, // le state par défaut de notre slice
  reducers: {
    // action ADD_PRODUCT déplacée ici
    addProduct: (currentState, action) => {
      const listWithNewProduct = [...currentState, action.payload]
      return listWithNewProduct
    },
    // action REMOVE_PRODUCT déplacée ici
    removeProduct: (currentState, action) => {
      const list = [...currentState.list].filter(
        (item, index) => index !== action.payload
      )
      return list
    },
    // action APPLY_VOUCHER déplacée ici
    applyVoucher: (currentState, action) => {
      const withVoucherList = currentState.map(
     item => item.title === 'Super Crémeux' ? ({...item, price: action.payload.price}) : item
       )
      return withVoucherList
    },
  }
})

• modifié notre app/store.js  pour combiner 2 reducers : celui créé directement par notre slice et les actions restantes pour la mise à jour du propriétaire du restaurant. 

import { combineReducers, configureStore, createAction, createReducer } from "@reduxjs/toolkit"
import { cartSlice } from "../features/cart/cartSlice";

let state = {
  owner: {},
  list: [
  ]
};

export const updateFirstName = createAction('UPDATE_FIRSTNAME', (firstName) => {
  return {
    payload: firstName
  }
})

const reducer = createReducer(state, {
  // on garde cette partie qui ne fait pas partie de notre slice
  [updateFirstName]: (currentState, action) => {
    const owner = {...currentState.owner, firstName: action.payload}
    return {...currentState, …owner}
  }
})

export const store = configureStore(
  {
    preloadedState: state,
    reducer: combineReducers({ // utilisé pour combiner nos reducers
      owner: reducer,
      list: cartSlice.reducer,
    })
  }
)

Dans la prochaine partie, ce sera à vous de créer la slice dédiée !

À vous de jouer

Vous allez refactoriser la mise à jour de la fiche propriétaire en créant une slice dédiée.

Pour cela, créez votre fichier features/owner/ownerSlice.js  . Puis ajoutez la création de votre slice. Enfin, dans le store, combinez le reducer créé par votre slice.

Ci-dessous, ma solution proposée :

Et voilà, nous avons découpé notre store en slices. Bravo !

En résumé

• Utiliser les slices nous permet de découper le store en plusieurs parties.

• Chaque slice est typiquement associé à une fonctionnalité spécifique de l'application, organisée dans des dossiers séparés.

• createSlice génère automatiquement des reducers, des actions, et des action creators à partir d'un objet définissant l'état initial et les fonctions réductrices.

• Elle nous épargne la nécessité de créer nos actions.

Nous avons les bons outils pour rajouter autant de fonctionnalités que voulu dans notre application.

Avant d’aller plus loin avec Redux Toolkit, dans l’utilisation de l’asynchrone ou des appels API, nous allons introduire un outil avancé, permettant de rendre génériques nos slices, les EntityAdapters  .