Installation de Redux et RTK dans une application React

Lors de cette leçon, nous installerons dans notre application le package React-Redux, qui permet aux composants React de fonctionner de concert avec Redux, ainsi que l'outil Redux Toolkit (abrégé RTK).

Ouvrons notre projet et tapons dans le terminal la commande suivante :

npm install @reduxjs/toolkit react-redux

Maintenant, nous devons créer le store (magasin), dans lequel sera stocké l'état global de notre application. Pour commencer, dans le dossier src, nous créerons un dossier app, et dedans un fichier store.js. Ensuite, dans ce fichier, nous devons importer configureStore de RTK :

import { configureStore } from '@reduxjs/toolkit'

Ensuite, créons un store vide et passons-lui au moins un reducer :

export default configureStore({
	reducer: {}
});

Pour que nos composants React puissent interagir avec le store, nous allons procéder comme suit. Allons dans notre fichier main.jsx, dans lequel se trouve déjà le code :

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
	<React.StrictMode>
		<App />
	</React.StrictMode>,
)

Dans les imports, ajoutons les lignes pour le store créé à l'étape précédente et le composant Provider :

import store from './app/store'
import { Provider } from 'react-redux'

Puis, enveloppons notre composant principal App dans le Provider, et passons-lui le store en tant que prop :

<React.StrictMode>
	<Provider store={store}>
		<App />
	</Provider>
</React.StrictMode>

Et, enfin, dans le composant React principal App, plaçons le code suivant :

function App() {
	return <h2>This is my first Redux app!</h2>
}

export default App

Relançons notre projet et voyons dans la fenêtre du navigateur : 'This is my first Redux app!'. Ne prêtons pas attention pour l'instant à l'avertissement concernant l'absence d'un reducer valide. Vous avez réussi, félicitations :).

Installez Redux et RTK dans votre application, comme décrit dans la leçon. Assurez-vous que votre application fonctionne.