• 8 heures
  • Difficile

Ce cours est visible gratuitement en ligne.

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 31/01/2024

Simplifiez votre architecture avec Redux

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 :

La console affiche un message confirmant l'installation des deux outils
Redux et RTK sont installés

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.

Et si vous obteniez un diplôme OpenClassrooms ?
  • Formations jusqu’à 100 % financées
  • Date de début flexible
  • Projets professionnalisants
  • Mentorat individuel
Trouvez la formation et le financement faits pour vous
Exemple de certificat de réussite
Exemple de certificat de réussite