03/01/2025REACT
Tuto pour utiliser Redux dans React
📌
Redux est une librairie permettant la gestion des state de façon globale dans un store.
Elle va notamment permettre d’utiliser un state dans un composant où qu’il soit dans l’arborescence de l’app, sans devoir passer le state en props de ses composants parents jusqu’à lui.
npm install @reduxjs/toolkit react-redux
Mise en place
1. Créer le store
Le fichier store.js sera placé dans le dossier src :
store.js
import { configureStore } from "@reduxjs/toolkit";
import count from "./slices/count";
export const store = configureStore({
reducer: {
count
}
})
2. Créer le slice
count.js
import { createSlice } from '@reduxjs/toolkit';
export const countSlice = createSlice({
name: 'count',
initialState: {
value: 0,
},
reducers: {
increment: (state, action) => {
state.value += 1;
},
decrement: (state, action) => {
state.value -= 1;
},
},
});
export const { increment, decrement } = countSlice.actions;
export default countSlice.reducer;
3. Mettre en place le Provider
En général on va placer le provider dans le composant racine du projet (App)
App.js
import { Provider } from 'react-redux';
import { store } from './store';
return <Provider store={store}>
...
</Provider>
Utilisation
Composant.js
import { useDispatch, useSelector } from 'react-redux';
import { increment } from '../slices/count';
const Composant = () => {
const count = useSelector(state => state.count.value);
const dispatch = useDispatch();
return <div>
{count}
<button onClick={() => dispatch(increment())}>Increment</button>
</div>
}
0