Installez Redux
En tant que développeurs, nous devons nous efforcer à ne pas réinventer la roue à chaque nouveau projet.
De ce fait, il existe des outils de la communauté qui nous permettent dans la plupart des cas de répondre à nos problématiques. Et c’est ici qu’entre en jeu Redux, notre gestionnaire de state centralisé.
Tout d’abord, je vous propose d’installer Redux. Et pour ce faire, je vais vous demander d’installer Redux Toolkit.
Mais pourquoi installer Redux Toolkit alors que l’on travaille sur Redux ?
Eh bien la raison est la suivante : Redux est un outil open source, propulsé par une communauté. De ce fait, les développeurs qui la composent ont dicté des “best practices” qui font office de normes. Les pratiques actuelles préconisent d’utiliser Redux avec Redux Toolkit (RTK). C’est donc pourquoi nous apprenons à utiliser Redux avec RTK.
Installons maintenant Redux et RTK :
Ajoutez la ressource suivante dans votre fichier HTML :
<script src="https://unpkg.com/@reduxjs/toolkit@1.9.7/dist/redux-toolkit.umd.js"></script>Dans votre navigateur, dans la console, tapez window.RTK puis Entrée . Vous devriez retrouver ce qui suit :
Voilà Redux et RTK bien installés !
Créez un store avec Redux
Allons-nous remplacer notre implémentation par Redux?
Oui, mais vous verrez, son utilisation ne diffère pas beaucoup de ce que nous avons réalisé.
Suivez le screencast suivant pour ajouter Redux dans notre projet.
Pour résumer, nous avons donc créé un store avec la fonction configureStore de RTK. Ce store nous expose deux fonctions, subscribe et dispatch , ce qui nous permet de remplacer les deux fonctions implémentées précédemment. C’est tout ce qu’il y avait à faire, le fonctionnement reste le même.
Ce qui nous donne dans un fichier flux_s6.html :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="header">
Aucun propriétaire configuré
</div>
<form id="addForm" action="#">
<input name="firstName" />
<button>Enregistrer</button>
</form>
<div>
<button class="orderButton" data-id="PouletCroquant">Poulet Croquant</button>
<button class="orderButton" data-id="DoubleCantal">Double Cantal</button>
<button class="orderButton" data-id="SuperCremeux">Super Cremeux</button>
</div>
<div>
<button id="voucher">Super Crémeux à 2 euros</button>
</div>
<div id="command"></div>
<script src="https://unpkg.com/@reduxjs/toolkit/dist/redux-toolkit.umd.min.js"></script>
<script src="flux_s6.js"></script>
</body>
</html>Et dans un fichier flux_s6.js :
const DoubleCantal = {
title: 'Double Cantal',
price: 15.99,
}
const SuperCremeux = {
title: 'Super Crémeux',
price: 14.99,
}
const PouletCroquant = {
title: 'Poulet Croquant',
price: 17.99,
}
const PRODUCT_LIST = {
PouletCroquant,
SuperCremeux,
DoubleCantal,
}
let state = {
value: null,
list: []
};
const subscribers = [];
const reducer = (currentState, action ) => {
switch (action.type) {
case 'ADD_PRODUCT':
const listWithNewProduct = [...currentState.list, action.payload]
return {...currentState, list: listWithNewProduct}
case 'REMOVE_PRODUCT':
const list = currentState.list.filter(
(item, index) => index !== action.payload
)
return {...currentState, list: list}
case 'APPLY_VOUCHER':
const withVoucherList = currentState.list.map(
item => item.title === 'Super Crémeux' ? ({...item, price: action.payload.price}) : item
)
return {...currentState, list: withVoucherList}
case 'UPDATE_FIRSTNAME':
const owner = {...currentState.owner, firstName: action.payload}
return {...currentState, owner}
default:
return currentState
}
}
const store = window.RTK.configureStore(
{
preloadedState: state,
reducer
}
)
store.subscribe(() => {
const state = store.getState()
if (state.owner) {
console.log('Le propriétaire est ajouté', state.owner)
document.getElementById('header').textContent = `Le propriétaire du restaurant est ${state.owner.firstName}`
}
if (state.list) {
document.getElementById('command').innerHTML = ``;
for (let item of state.list) {
const itemElement = document.createElement('div')
itemElement.innerHTML = `
<div>
${item.title} <span>${item.price}</span>
</div>
`
document.getElementById('command').appendChild(itemElement)
}
}
})
document.getElementById('addForm').addEventListener("submit", (evt) => {
evt.preventDefault()
const firstNameInput = evt.currentTarget.firstName
store.dispatch({type: 'UPDATE_FIRSTNAME', payload: firstNameInput.value })
})
document.querySelectorAll('.orderButton').forEach((element) => {
element.addEventListener('click', (event) => {
const productId = event.target.dataset['id']
store.dispatch({type: 'ADD_PRODUCT', payload: PRODUCT_LIST[productId] })
})
})
document.getElementById('voucher').addEventListener("click", (evt) => {
store.dispatch({type: 'APPLY_VOUCHER', payload: {price: 2.00} })
})En résumé
Redux étant développé par une communauté open source, nous suivons les best practices et installons RTK comme préconisé.
Redux et RTK sont installés en ajoutant le script hébergé
redux-toolkit.umd.min.js.Nous avons remplacé notre implémentation Flux par Redux en utilisant ReduxTool Kit.
Allons dès maintenant vérifier votre compréhension de cette première partie avec un quiz ! Puis dans la partie 2, nous irons plus loin avec Redux et Redux ToolKit.
