Installation et Configuration de Redux Toolkit

Pour commencer à utiliser Redux Toolkit, il est nécessaire de l’installer ainsi que les liaisons React.

Exécutez la commande suivante dans votre projet :

npm install @reduxjs/toolkit react-redux

Cela installe tout le nécessaire pour créer un store et le connecter à votre application React.

Configuration du store

Créez un nouveau fichier pour le store. Un emplacement courant est :

src/store/store.js

Dans ce fichier, créez le store en utilisant configureStore :

import { configureStore } from '@reduxjs/toolkit';

export const store = configureStore({
  reducer: {}
});

À ce stade, le store est vide. Vous ajouterez des reducers dans les prochains chapitres.

Connexion de Redux à React

Pour rendre le store disponible dans votre application, encapsulez votre composant racine avec Provider.

Ouvrez votre fichier d’entrée principal (par exemple main.jsx ou index.js) et mettez-le à jour comme suit :

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { store } from './store/store';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(
  <Provider store={store}>
    <App />
  </Provider>
);

Le store Redux est maintenant accessible dans chaque composant.