Formation : ReactJS

Période : Les 29, 30 et 31 aout 2022 (Formation en ligne)

Formateur : Anis ASSAS

Atelier 5 : Intégration d’une SPA avec ReactJS et Redux

Partie 1 : Activité de démonstration : Gestion d’un compteur

On se propose dans cette activité de créer avec React et Redux un simple compteur de clics
qu'on peut l'incrémenter, le décrémenter ou le remettre à zéro.

1. Création du projet et Installation du redux

• Créer un nouveau projet react intitulé my-react-redux-app via create-react-app :

> npx create-react-app my-react-redux-app

• Installer les modules "redux" et "react-redux" :

> npm install redux react-redux --save

2. Création des boutons d'incrémentation et décrémentation avec JSX

• Ouvrir le fichier App.js (chemin: ./src/App.js) et remplacer le code existant par

celui-ci :
function App() {
return (
<div className='App'>
<div>Count: 0</div>
<button>Increase Count</button>
<button>Decrease Count</button>
</div>
);
}

Dans votre navigateur, vérifiez que votre compteur est à zéro et que les deux
boutons : "Increase Count" et "Decrease Count" sont ajoutés.

3. Configurer les reducers et les actions

• Pour bien organiser la structure du projet, créer un nouveau dossier redux sous
/src, puis un autre dossier appelé counter (chemin: ./src/redux/counter).
• Dans le dossier counter, créer deux nouveaux fichiers : "counter.actions.js" et
"counter.reducer.js" :
• Ajouter dans le fichier counter.actions.js, les deux actions : increaseCounter
et increaseCounter relatifs au compteur.

Formation ReactJS – A.ASSAS Page 1|4

 // Créateurs d'actions
export const increaseCounter = () => {
return {
type: 'INCREMENT',
};
};
export const decreaseCounter = () => {
return {
type: 'DECREMENT',
};
};

• Enfin, ajouter dans le fichier counter.reducer.js le reducer de notre compteur.

const INITIAL_STATE = {
count: 0,
};
const reducer = (state = INITIAL_STATE, action) => {
switch (action.type) {
case 'INCREMENT':
return {
...state, count: state.count + 1,
};

case 'DECREMENT':
return {
...state, count: state.count - 1,
};
default: return state;
}
};
export default reducer;

4. Création du store

• Dans le même répertoire redux, créer un fichier rootReducer.js

import { combineReducers } from 'redux';
import counterReducer from './counter/counter.reducer';

//Combine les différents reducers en un seul reducer

const rootReducer = combineReducers({
counter: counterReducer,

}); export default rootReducer;

• Pour créer le Store, créer un fichier nommé store.js (Chemin :
/src/redux/store.js) incluant le code suivant :

import { createStore } from 'redux';

import rootReducer from './rootReducer';

//créer un store avec la fonction createStore en fonction du reducer

const store = createStore(rootReducer);
export default store;

Formation ReactJS – A.ASSAS Page 2|4

 5. Distribution du Store à toute l’application

• Au niveau du fichier index.js, créer un composant parent appelé <Provider>,

auquel la valeur du store est transmise dans la propriété store.

// Importation de module react-redux

import { Provider } from 'react-redux';
// Importation de fichier store
import store from './redux/store';
ReactDOM.render(
<Provider store={store}>
<React.StrictMode>
<App />
</React.StrictMode>
</Provider>,
document.getElementById('root')
);

6. Connecter le state et les actions de redux à un composant React

• La dernière étape consiste à utiliser le state et les actions de redux dans notre
composant. Pour ce faire, modifier le code source du fichier App.js par celui-ci :
import React from "react"
import {increaseCounter,decreaseCounter} from "./redux/counter/counter.actions"
import {connect} from 'react-redux';
function App(props) {
return (
<div className="App">
<div>Count: {props.count}</div>
<button onClick={() => props.increaseCounter()}>
Increase Count
</button>
<button onClick={() => props.decreaseCounter()}>
Decrease Count
</button>
</div>
)
}
const mapStateToProps = state => {
return {
count: state.counter.count,
}
}
const mapDispatchToProps = dispatch => {
return {
increaseCounter: () => dispatch(increaseCounter()),
decreaseCounter: () => dispatch(decreaseCounter()),
}
}
export default connect(mapStateToProps, mapDispatchToProps)(App)

Rappel : La fonction mapStateToProps, comme son nom l'indique, mappe le state

redux aux props du composant.

La fonction mapDispatchToProps fait pratiquement la même chose, mais au lieu

d'ajouter un state aux props, elle ajoute les actions aux props. Dans notre activité,
Formation ReactJS – A.ASSAS Page 3|4
 nous avons retourné deux actions, à savoir increaseCounter ou decreaseCounter :
deux actions qui sont déclenchées après avoir cliqué respectivement sur les boutons
"Increase Count" et "Decrease Count".

Partie 2 : Pour maitriser au mieux les principes de redux

1. Création d’un nouveau composant pour la remise à zéro

En adoptant la même démarche et en créant cette fois-ci un nouveau composant

sous un nouveau dossier (src/components/reset.js), faire le nécessaire afin d’ajouter
un troisième bouton Reset à l’application permettant de mettre à zéro le compteur.

2. Exploitation du store par un autre composant : table de multiplication

Créer un nouveau composant ‘src/components/multiplication.js’ permettant

d’afficher la table de multiplication de 1 à 9 en fonction de la valeur courante du
compteur.

3. Formulaire et opérations CRUD sous redux : Liste des personnes

Au niveau du même projet, on se propose de modifier le store et de faire le

nécessaire afin d’afficher une liste des noms de personnes. On aura de même la
possibilité d’en ajouter et supprimer.
NB : Créer sous ‘src/components’, un nouveau dossier ‘persons’ incluant les deux
composants ‘formAjout’ et ‘listPersons’

Formation ReactJS – A.ASSAS Page 4|4