Le guide de l’implémentation Redux dans une application React

Dans le monde du développement web moderne, React et Redux sont largement plébiscités pour la création d’applications web évolutives et performantes. L’association de ces deux technologies permet de créer des interfaces utilisateurs interactives et de gérer efficacement l’état global de l’application web. Cet article a pour vocation de vous guider pas à pas dans l’implémentation de Redux dans une application React.

Comprendre le fonctionnement de Redux

Avant de plonger tête la première dans le code, il est important de bien comprendre les principes fondamentaux de Redux. À la base, Redux est un conteneur d’état prévisible pour les applications JavaScript. Il vous aide à gérer l’état global de votre application, en facilitant la transmission des données entre les composants.

Dans Redux, l’état de l’application est stocké dans un store unique. Ce store est modifié via des actions qui sont dispatchées. Chaque action est traitée par un reducer, une fonction qui décrit comment l’état de l’application doit changer en réponse à l’action.

Pourquoi choisir Redux dans son application web React

Dans cet article, nous alllons étudié comment utiliser Redux dans une application React pour gérer l’état de l’application. Nous allons apprendres comment créer un store, définir des actions et des reducers, et comment connecter Redux à notre application web React à l’aide de la bibliothèque react-redux.

L’objectif est d’explorer comment tester notre implémentation Redux et comment utiliser Redux Toolkit pour simplifier notre code.

Cependant, il est important de noter que Redux n’est pas toujours nécessaire ou approprié pour chaque application React. Pour les applications moins complexes, le Context API de React peut souvent suffire pour la gestion de l’état. Cependant, pour les applications web plus larges et plus complexes, Redux offre un moyen plus structuré et prévisible de gérer l’état global de l’application.

import { createStore } from 'redux'

function reducer(state = {}, action) {
  switch (action.type) {
    case 'ACTION_TYPE':
      return {...state, ...action.payload}
    default:
      return state
  }
}

const store = createStore(reducer)

Ici, createStore() est une fonction de Redux qui crée le store. Le reducer est passé en argument à cette fonction. Dans le reducer, nous définissons comment l’état de l’application doit changer en réponse à chaque type d’action.

Connecter Redux à votre application React

Une fois que vous avez compris les principes de base de Redux, la prochaine étape est de l’intégrer à votre application React. Pour cela, vous aurez besoin de la bibliothèque react-redux.

Commencez par installer react-redux dans votre projet :

npm install react-redux

Ensuite, vous pouvez utiliser le composant Provider de react-redux pour rendre le store disponible à tous les composants de votre application :

import { Provider } from 'react-redux'

function App() {
  return (
    <Provider store={store}>
      {/* Vos composants ici */}
    </Provider>
  )
}

Gérer les actions avec Redux

Dans Redux, les actions sont des objets qui contiennent une propriété type et qui peuvent aussi contenir des données supplémentaires dans une propriété payload. Vous pouvez définir des actions en utilisant des fonctions appelées action creators.

function actionCreator(payload) {
  return {
    type: 'ACTION_TYPE',
    payload: payload
  }
}

Dans ce code, actionCreator() est une fonction qui crée et retourne une action. Lorsqu’un événement se produit dans votre application (par exemple, un clic de bouton), vous pouvez dispatch cette action pour mettre à jour le store.

Mettre à jour le state avec les reducers

Dans Redux, les reducers sont des fonctions qui prennent le state actuel et une action comme arguments, et qui retournent un nouvel état. Ils sont essentiels pour comprendre comment l’état de votre application change en réponse à des actions.

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'ACTION_TYPE':
      return {...state, ...action.payload}
    default:
      return state
  }
}

Dans ce code, le reducer renvoie un nouvel état en fonction du type d’action. Notez que les reducers sont des fonctions pures : ils ne modifient pas l’état actuel, mais retournent un nouvel état.

Utiliser les données du store dans vos composants

Une fois que vous avez mis en place votre store et vos reducers, vous pouvez utiliser les données du store dans vos composants. Pour cela, vous pouvez utiliser la fonction useSelector() de react-redux.

import { useSelector } from 'react-redux'

function MyComponent() {
  const data = useSelector(state => state.data)
  
  return (
    <div>
      {data.map(item => (
        <p>{item}</p>
      ))}
    </div>
  )
}

Dans ce code, useSelector() est une fonction qui vous permet de sélectionner une partie de l’état du store. Vous pouvez ensuite utiliser ces données dans votre composant React.

Testing Redux dans votre application React

Une fois que vous avez connecté Redux à votre application React et utilisé le store Redux pour gérer l’état de votre application, il est essentiel de tester votre implémentation pour s’assurer qu’elle fonctionne comme prévu. Pour ce faire, vous pouvez utiliser des bibliothèques de test comme Jest et React Testing Library qui vous permettent d’écrire des tests unitaires et d’intégration pour vos composants React et vos reducers Redux.

Commencez par installer ces bibliothèques de test dans votre projet :

npm install --save-dev jest react-testing-library

Ensuite, vous pouvez écrire des tests pour vos action creators et vos reducers. Par exemple, nous pouvons tester si notre reducer retourne bien le nouvel état attendu lorsqu’une action est dispatchée :

import reducer from './reducer'
import { actionCreator } from './actions'

test('should return the initial state', () => {
  expect(reducer(undefined, {})).toEqual({})
})

test('should handle ACTION_TYPE', () => {
  const initialState = {data: []}
  const payload = {data: ['item1', 'item2']}
  const expectedState = {data: ['item1', 'item2']}
  
  expect(reducer(initialState, actionCreator(payload))).toEqual(expectedState)
})

Ces testes vous permettent de vérifier que vos reducers fonctionnent correctement et retournent l’état attendu de votre application.

Utiliser Redux Toolkit pour simplifier votre code

Redux Toolkit est un ensemble d’outils qui visent à simplifier la gestion de l’état avec Redux. Il fournit des fonctions qui vous aident à réduire la quantité de code que vous devez écrire et à éliminer certaines des complexités de Redux.

Pour installer Redux Toolkit dans votre projet, exécutez la commande suivante :

npm install @reduxjs/toolkit

Ensuite, vous pouvez utiliser les fonctions createSlice() et configureStore() de Redux Toolkit pour créer votre store et vos reducers :

import { createSlice, configureStore } from '@reduxjs/toolkit'

const slice = createSlice({
  name: 'slice',
  initialState: {},
  reducers: {
    actionType: (state, action) => {
      state.data = action.payload
    },
  },
})

export const { actionType } = slice.actions
export default slice.reducer

const store = configureStore({
  reducer: slice.reducer
})

Dans ce code, createSlice() génère automatiquement l’action creator et le reducer pour vous, ce qui rend votre code plus concis et facile à lire.

Ainsi, avant d’adopter Redux, il est essentiel d’évaluer les besoins de votre projet et de peser les avantages et les inconvénients de chaque approche. Bonne codage !

👉 Pour en savoir plus les différents frameworks, voici un article sur leurs avantages et inconvénients.

React chez Hello Pomelo

Nos experts sont là pour vous accompagner dans la création de votre application web. Nous vous accompagnons dans les différentes étapes de votre transformation digital. N’hésitez pas à nous contacter pour toutes question !