Alphorm.com Formation Redux : Niveau Avancé
0 likes1,649 views
This document outlines an advanced training course on Redux, aimed at front-end developers, web integrators, project leaders, and facilitators. It covers foundational concepts, advanced features like hooks and middleware, and practical applications such as testing and state management in React applications. The course includes resources, tools, and projects to enhance learning and application of Redux principles.
![Les middleware
export default
createStore(rootReducer,
applyMiddleware(...[thunk,
logger])
);](https://image.slidesharecdn.com/alphorm-210604123954/85/Alphorm-com-Formation-Redux-Niveau-Avance-53-320.jpg)
![ApplyMiddleware
export default
createStore(reducer,
applyMiddleware(...[thunk,
logger])
);](https://image.slidesharecdn.com/alphorm-210604123954/85/Alphorm-com-Formation-Redux-Niveau-Avance-63-320.jpg)
Alphorm.com Formation Redux : Niveau Avancé
- 2. Cursus Redux
- 3. Une formation Introduction 1. Rappel des fondamentaux de Redux projet: Gestionnaire de contacts 2. Découvrir les concepts avancés de Redux 3. Utiliser les hooks 4. Tester avec Redux 5. Persister les valeurs globales Conclusion Plan de la formation
- 4. Une formation Développeurs Front Intégrateurs web Chefs et facilitateurs de projet Public concerné
- 5. Une formation Public concerné Développeurs Front Intégrateurs web Chefs et facilitateurs de projet
- 6. Une formation Développeurs Front Intégrateurs web Chefs et facilitateurs de projet Public concerné
- 7. Une formation Connaissances requises HTML & CSS Expérience avec Bootstrap 5 Notions de javascript Librairies JS Front (React, Angular, Vue ...)
- 9. Présentation du projet Une formation Sandy LUDOSKY
- 13. Ressources et outils Une formation Sandy LUDOSKY
- 14. Une formation Ressources & outils Visual Studio Code Node.js & Npm React 17+ / React CLI React Developer Tools Redux Developer Tools
- 15. Une formation Visual Studio Code Ressources & outils
- 16. Une formation Node.js & Npm Ressources & outils
- 17. Une formation Ressources & outils React 17+ / React CLI React Developer Tools
- 18. Une formation Visual Studio Code Node.js & Npm React 17+ / React CLI React Developer Tools Redux Developer Tools Ressources & outils
- 19. Une formation Les ressources Les fichiers téléchargeables 📁 Les outils ⚙ Ressources & outils
- 20. Une formation Sandy LUDOSKY Découvrir le projet de démarrage
- 21. Une formation Projet de démarrage Télécharger le projet 📁 Anatomie et dépendances du projet
- 22. Une formation Sandy LUDOSKY Gérer les valeurs globales avec les créateurs d’actions, le reducer et le store
- 23. Actions, reducer & store Cycle de vie unidirectionnel UI=> actions => store store => state => UI
- 24. Flux de données REDUCER STORE U I
- 26. Une formation Créateur d’action { type: “ADD_TODO“ payload : {} }
- 27. Actions, reducer & store Créateur d’action
- 28. Une formation Fonction reducer function reducer(state = initialState, action) { switch(action.type) { case “TYPE” : return {} } }
- 29. Fonction reducer
- 31. Une formation Sandy LUDOSKY Distribuer des actions pour des nouveaux contacts
- 32. Dispatch dispatch({ type: 'ADD_TODO, payload: 'Learn about actions' })
- 33. Une formation Sandy LUDOSKY S’abonner aux mises à jour du store avec le composant Provider
- 34. Composant Provider ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') )
- 35. Une formation Sandy LUDOSKY Connecter les composants React au store avec connect()
- 37. Une formation Sandy LUDOSKY Débugger avec les Redux DevTools
- 38. Une formation Developer Tools React developer tools ⚛ Redux developer tools
- 40. Introduction aux concepts avancés Redux Une formation Sandy LUDOSKY
- 41. Une formation Concepts avancés Redux CombineReducers CreateSelector applyMiddleware compose
- 43. Une formation Sandy LUDOSKY Fractionner la gestion d’état combineReducers
- 45. Une formation Sandy LUDOSKY Créer des états dérivés avec les selectors
- 46. États dérivés avec les selectors export const selectItems = (state) => state.items;
- 47. Une formation Sandy LUDOSKY Créer des selectors avec createSelector
- 49. const selectState = (state) => state.contacts export const selectContacts = createSelector( selectState, (contacts) => { return `You have ${contacts} in your list` }) createSelector
- 50. Une formation Sandy LUDOSKY Comprendre les middlewares
- 51. Une formation Définition Programme entre d'autres applications afin de fournir des fonctionnalités supplémentaires
- 52. Une formation Comprendre les middlewares Fonctions asynchrones Rapports d’activités Rapports d’incidents
- 54. Une formation Sandy LUDOSKY Utiliser le middleware Redux Thunk
- 55. Le middleware Redux Thunk source : https://redux.js.org/tutorials/fundamentals/part-6-async-logic#using-the-redux-thunk-middleware
- 56. Une formation Les fonctions thunk Permet d’exécuter la logique asynchrone Distribuer des actions Lire l'état du magasin si nécessaire
- 57. Utiliser le middleware Redux Thunk export default createStore(reducer, applyMiddleware(thunk) );
- 58. Une formation Sandy LUDOSKY Imbriquer les fonctions avec compose()
- 59. Une formation Imbriquer plusieurs fonctions Utilitaire de programmation fonctionnel pour imbriquer plusieurs fonctions Gauche à droite Plusieurs optimisateurs fournis au store
- 60. Imbriquer les fonctions avec compose() compose(...functions)
- 61. Une formation Sandy LUDOSKY Créer un custom middleware
- 62. Une formation Créer un logger Pour suivre et afficher les actions distribuées au store
- 64. Une formation Sandy LUDOSKY Utiliser un custom middleware
- 65. Une formation Custom middleware Suivre actions distribuées au store Afficher les logs dans la console
- 66. Utiliser un custom middleware previous state ➡ {contacts: {…}, filters: {…}, _persist: {…}} action : {type: "REMOVE_CONTACT", payload: {…}} new state after dispatch ➡ {contacts: {…}, filters: {…}, _persist: {…}}
- 67. Une formation Sandy LUDOSKY Regrouper les actions bindActionCreators
- 69. Une formation Sandy LUDOSKY Réunir les props mergeProps
- 72. Une formation Sandy LUDOSKY Utiliser les redux hooks
- 74. Une formation Sandy LUDOSKY Distribuer des actions useDispatch()
- 75. useDispatch import React from 'react' import { useDispatch } from 'react-redux' const dispatch = useDispatch() <button onClick={() => dispatch({ type: 'increment-counter' })}> Increment counter </button>
- 76. Une formation Sandy LUDOSKY Souscrire aux mises à jour du store useSelector()
- 77. useSelector import React from 'react' import { useSelector } from 'react-redux' export const CounterComponent = () => { const counter = useSelector(state => state.counter) return <div>{counter}</div> }
- 78. Introduction Écrire des tests unitaires avec Redux Une formation Sandy LUDOSKY
- 79. Une formation Écrire des tests unitaires avec Redux Mise en place test unitaires Créer des jeux de données (mocks)
- 81. Une formation Sandy LUDOSKY Tester les actions
- 82. Une formation Tester les actions describe() it() expect()
- 83. Une formation Sandy LUDOSKY Tester les reducers
- 84. Une formation Tester les reducer describe() it() expect()
- 85. Une formation Sandy LUDOSKY Découvrir le paquet redux-resist
- 86. Une formation Paquet redux-resist persistConfig = {} persistReducer() persistStore() persistGate
- 87. persistConfig = {} const persistConfig = { key: 'root', storage, }
- 89. persistStore() export default () => { let store = createStore(persistedReducer) let persistor = persistStore(store) return { store, persistor } }
- 90. Une formation Sandy LUDOSKY Créer un objet persistConfig
- 91. persistConfig const persistConfig = { key: 'root', storage, }
- 92. Une formation Sandy LUDOSKY Utiliser la méthode persistReducer
- 94. Une formation Sandy LUDOSKY Utiliser la méthode persistStore
- 95. persistStore export default () => { let store = createStore(persistedReducer) let persistor = persistStore(store) return { store, persistor } }
- 96. Une formation Sandy LUDOSKY Utiliser le composant persistGate
- 97. persistGate import { PersistGate } from 'redux-persist/integration/react' const App = () => { return ( <Provider store={store}> <PersistGate loading={null} persistor={persistor}> <RootComponent /> </PersistGate> </Provider> ); };
- 99. Une formation Bilan Démarrer avec Redux La référence API : les fondamentaux Installation & Usage Projet React : gestionnaire de contacts Projet React : gestion état application avec Redux
- 100. Rappel Cursus Redux