• 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

Mettre en place Redux dans une application React

Compétences évaluées

  • Mettre en place Redux dans une application React

Description

Nous voulons donc utiliser Redux dans une application React. Vous savez créer une application React, vérifions si vous savez ajouter et utiliser Redux dans une application React.

  • Question 1

    Quels sont les packages à installer afin de bénéficier de Redux dans une application React ?

    • @reduxjs/toolkit et react-redux

    • @redux et react-rtk

    • @redux/toolkit et react-redux

    • redux react-redux

  • Question 2

    Nous ajoutons Redux à une application React. Laquelle des implémentations suivantes est conforme ?

    • app/store.js

      import { combineReducers, configureStore } from "@reduxjs/toolkit"
      import { exampleSlice } from "../features/cart/cartSlice";
      
      let state = {
        example: {},
      };
      
      export const store = configureStore(
        {
          preloadedState: state,
          reducer: combineReducers({
           example: exampleSlice.reducer,
          })
        }
      )
      

      app/App.js

      import { Provider } from 'react-redux'
      import { store } from './store';
      
      function App() {
        return (
          <Provider store={store}>
            <div className="App">
            </div>
          </Provider>
        );
      }
      
      export default App;
      

       

    • app/store.js

      import { combineReducers, configureStore } from "@reduxjs/toolkit"
      import { exampleSlice } from "../features/cart/cartSlice";
      
      let state = {
      example: {},
      };
      
      export const store = configureStore(
        {
          preloadedState: state,
          reducer: combineReducers({
            example: exampleSlice.reducer,
          })
        }
      )
      

      app/App.js

      function App() {
        return (
          <div className="App">
          </div>
        );
      }
      
      export default App;
      

       

    • app/store.js

      import { combineReducers, configureStore } from "@reduxjs"
      import { exampleSlice } from "../features/cart/cartSlice";
      
      let state = {
        example: {},
      };
      
      export const store = createStore(
        {
          preloadedState: state,
          reducer: combineReducers({
            example: exampleSlice.reducer,
          })
        }
      )
      

      app/App.js

      import { Provider } from '@reduxjs'
      import { store } from './store';
      
      function App() {
        return (
          <Provider store={store}>
            <div className="App">
            </div>
          </Provider>
        );
      }
      
      export default App;
      

       

    • app/store.js

      import { combineReducers, configureStore } from "@reduxjs/toolkit"
      import { exampleSlice } from "../features/cart/cartSlice";
      
      let state = {
        example: {},
      };
      
      export const store = configureStore(
        {
          preloadedState: state,
          reducer: combineReducers({
            example: exampleSlice.reducer,
          })
        }
      )
      

       

      app/App.js

      import { Provider } from 'react-redux'
      
      function App() {
        return (
          <Provider>
            <div className="App">
            </div>
          </Provider>
        );
      }
      
      export default App;
      

       

       

  • Question 3

    Parmi les utilisations suivantes, quelles sont celles qui sont possibles avec Redux DevTools ?

    • Visualiser les actions Redux sans offrir la possibilité d'interagir ou de les modifier.

    • Éditer le code source de l'application directement depuis l'outil, fonctionnant comme un éditeur de code intégré.

    • Gérer les dépendances et les packages de l'application, comme npm ou yarn.

    • Débugger les applications avec Redux intégré, comme le suivi du changement du state.

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