Redux et Redux Toolkit

Introduction à
Redux
Qu'est-ce que Redux ?
• Redux est une bibliothèque de gestion d'état prévisible pour les
applications JavaScript.
• Il est basé sur le concept de flux de données unidirectionnel.
Principes de base de
Redux
• Unicité de la source de vérité
• État en lecture seule
• Modifications d'état via des actions
• Modifications effectuées par des
fonctions pures appelées réducteurs
 Redux Toolkit

Fonctionnalités de Redux Avantages de Redux Toolkit

Toolkit
• Création de reducers simplifiée • Réduction de la quantité de code
• Gestion des actions facilitée boilerplate
• Configuration de Redux simplifiée • Amélioration de la productivité des
développeurs
• Meilleure gestion des états complexes
AVANTAGES DE
REDUX TOOLKIT
Configuration simplifiée

Réduction du code boilerplate

Meilleure gestion des actions

asynchrones

Meilleure performance
Utilisation
de Redux
Toolkit
Simplification de la
configuration
Redux Toolkit fournit des fonctions telles que
createSlice et configureStore pour simplifier la
configuration de l'état Redux.
 Exemples de code
CRÉATION D'UNE SLICE
import { createSlice } from
'@reduxjs/toolkit';
const counterSlice = createSlice({
name: 'counter',
initialState: 0,
reducers: {
increment: state => state + 1,
decrement: state => state - 1
} });
});
Configuration du store
import { configureStore } from
'@reduxjs/toolkit';
import counterSlice from
'./counterSlice';
const store = configureStore({
reducer: {
counter: counterSlice.reducer
} <button onClick={() =>
Utilisation du store
import { useDispatch, useSelector }
from 'react-redux';
import { increment, decrement }
from './counterSlice';
const Counter = () => {
const dispatch = useDispatch();
const counter = useSelector(state
=> state.counter);
return (
<div>
<button onClick={() =>
dispatch(increment())}>+</button>
<p>{counter}</p>
dispatch(decrement())}>-</button>
</div>
);
};
Conclusion
REDUX
Redux est une bibliothèque puissante
pour la gestion d'état dans les
applications JavaScript.
REDUX TOOLKIT
Redux Toolkit offre des
utilitaires pour simplifier
l'utilisation de Redux.