⚠️ Documentation en cours de traduction ️️⚠️

Redux Logo

Redux est un conteneur d'état prévisible pour des applications JavaScript. (Ne pas confondre avec le framework Wordpress - Redux Framework.)

Il vous aide à écrire des applications qui ont un comportement cohérent, fonctionnant dans différents environnements (client, serveur et natif), et qui sont facilement testables. Cerise sur le gâteau, il offre une merveilleuse expérience de développement, comme l'édition de code en direct combiné avec une gestion d'erreur étape par étape.

Vous pouvez utiliser Redux conjointement avec React, ou avec toute autre bibliothèque de vue.
Il est minuscule (2kb, en incluant les dépendances).

Apprendre Redux

Nous avons une variété de ressources disponibles pour vous aider à apprendre Redux, peu importe votre parcours ou votre style d'apprentissage.

Juste les bases

Si vous débutez sur Redux et que vous voulez comprendre les concepts basiques, voir :

Concepts intermédiaires

Une fois que vous avez compris les bases de comment travailler avec les actions, les reducers et la mémoire (le store), vous pouvez avoir des questions sur des sujets comme, travailler avec la logique asynchrone et les requêtes AJAX, connecter un framework d'interface utilisateur comme React à votre store Redux, et mettre en place une application qui utilise Redux :

Usage dans le monde réel

Passer d'une application TodoMVC à une réelle application en production peut être un grand saut, mais nous avons beaucoup de ressources pour aider :

Enfin, Mark Erikson enseigne via une série d'ateliers Redux par Workshop.me.
Vérifiez le calendrier des ateliers pour les dates à venir et les emplacements.

Aide et discussions

Le canal #redux de la comunauté Discord Reactiflux est notre ressource officielle pour toutes les questions en relation à l'apprentissage et l'usage de Redux.
Reactiflux est un endroit idéal pour passer un moment, poser des questions et apprendre - venez nous rejoindre !

Avant d'aller plus loin

Redux est un outil précieux pour organiser l'état de votre application (le state), mais il faut aussi se demander si il convient à votre situation.
N'utilisez pas Redux juste parce que quelqu'un vous a dit que vous devriez - prenez le temps de comprendre les avantages et les compromis potentiels de son utilisation.

Voici quelques suggestions où il convient d'utiliser Redux :

  • Vous avez une quantité raisonnable de données qui varient dans le temps
  • Vous avez besoin d'une seule source de vérité pour l'état de votre application
  • Vous trouvez que garder tout l'état de votre application dans un composant de haut niveau ne suffit plus

Oui, ces lignes directrices sons subjectives et vagues, mais cela est pour une bonne raison. Le moment où vous devriez intégrer Redux dans votre application est différent pour chaque personne ainsi que pour chaque application.

Pour d'autres idées sur comment Redux peut-être utilisé, voir :

Expérience de développement

Dan Abramov (l'auteur de Redux) à écrit Redux en travaillant sur son discours pour React Europe appelé “Hot Reloading with Time Travel”. Son objectif était de créer une bibliothèque de gestion d'état avec une API minimal mais avec un comportememt totalement prévisible, alors il serait possible d'implémenter de la journalisation, du hot reloading, du suivi d'évolution dans le temps, des applications universelles, de l'enregistrement et de la relecture, sans aucun coût supplémentaire pour le développeur.

Influences

Redux s'inspire des idées de Flux, mais évite sa complexité en s'inspirant d'Elm.
Même si vous n'avez pas utilisé Flux ou ELM, Redux a besoin seulement de quelques minutes pour démarrer.

Installation

Pour installer la dernière version :

npm install --save redux

Cela suppose que vous utilisiez npm comme gestionnaire de dépendances.

Si ce n'est pas le cas, vous pouvez accéder à ces fichiers avec unpkg,

La plupart des gens utilisent Redux comme un ensemble de modules CommonJS. Ces modules sont ce que vous obtenez quand vous importez redux dans Webpack, Browserify, ou dans un environnement Node. Si vous aimez vivre en marge et utilisez Rollup, nous le supportons aussi.

Si vous n'utilisez pas un gestionnaire de regroupements de modules, ce n'est pas grave. Le paquet npm redux inclut les versions de production et de développement UMD dans le dossier dist. Elles peuvent être utilisées directement sans un "bundler" et sont donc compatibles avec beaucoup d'outils populaires de chargement de modules JavaScript et d'environnements. Par exemple, vous pouvez utiliser un build UMD comme une balise <script> dans la page, ou indiquer à Bower de l'installer. Les sources UMD permettent à Redux d'être disponible comme variable globale window.Redux.

Le code source de Redux est écrit en ES2015, nous le précompilons en CommonJS et UMD vers de l'ES5, donc il fonctionne dans tous les navigateurs modernes. Vous n'avez pas besoin d'utiliser Babel ou un gestionnaire de regroupements de modules pour commencer avec Redux.

Paquets complémentaires

Vraisemblablement, vous aurez aussi besoin de "React bindings" et des "developer tools".

npm install --save react-redux
npm install --save-dev redux-devtools

Notez que contrairement à Redux lui-même, beaucoup de paquets de l'écosystème Redux ne fournissent pas de version UMD, donc nous recommandons d'utiliser un gestionnaire de regroupements de modules de type CommonJS comme Webpack et Browserify pour avoir une expérience de développement plus confortable.

L'essentiel

L'état entier de votre application est enregistré dans un objet à l'intérieur d'un seul store.
Le seul moyen de changer l'état est d'émettre une action, un objet décrivant ce qui est arrivé.
Pour spécifier comment les actions transforment l'état, vous écrivez des reducers.

C'est tout!

import { createStore } from 'redux'

/**
 * Ceci est un reducer, une fonction pure avec (state, action) => state signature.
 * Ça décrit comment une action transforme l'état dans l'état suivant.
 *
 * La forme de l'état dépend de vous : cela peut être une primitive, un tableau,
 * un objet, ou même une structure de données Immutable.js. La seule partie
 * importante est que vous ne devez pas modifier l'état de l'objet, mais
 * retourner un nouvel objet si l'état change.
 *
 * Dans cet exemple, nous utilisons un `switch` et des `strings`, mais vous
 * pouvez utiliser un helper qui suit une convention différente (comme des
 * fonctions de map) si c'est mieux pour votre projet.
 */
function counter(state = 0, action) {
  switch (action.type) {
  case 'INCREMENT':
    return state + 1
  case 'DECREMENT':
    return state - 1
  default:
    return state
  }
}

// Créer un store Redux portant l'état de votre application.
// Son API est { subscribe, dispatch, getState }.
let store = createStore(counter)

// Vous pouvez utiliser subscribe() pour mettre à jour l'interface en réponse au changement d'état.
// Normalement vous devez utiliser une bibliothèque de liaison de vue (ex. React Redux) plutôt que d'utiliser subscribe() directement.
// Toutefois il peut également être utile d'enregistrer l'état local dans le localStorage.
store.subscribe(() =>
  console.log(store.getState())
)

// La seule façon de modifier l'état interne est de dispatcher une action.
// Les actions peuvent être sérialisées, logguées ou enregistrées et rejouées plus tard.
store.dispatch({ type: 'INCREMENT' })
// 1
store.dispatch({ type: 'INCREMENT' })
// 2
store.dispatch({ type: 'DECREMENT' })
// 1

Au lieu de changer l'état directement, vous spécifiez le changement que vous voulez voir avec un objet appellé actions. Ensuite vous écrivez une fonction spéciale appelée un reducer pour déterminer comment chaque action transforme l'état de l'application en entier.

Si vous venez de Flux, il y a une différence importante que vous devez saisir. Redux n'as pas de Dispatcher et n'accepte pas plusieurs stores. Au lieu de ça, il y a seulement un seul store avec une unique fonction reducer. Lorsque votre application grossira, au lieu d'ajouter des stores, vous séparerez le reducer principal en petit reducers indépendant opérant sur les différentes parties de l'état applicatif. De la même façon qu'il y a juste un composant principal dans une application React, mais composé de beaucoup de petit composant.

Cette architecture peut sembler exagérée pour une application de compteur, mais la beauté de ce modèle est la manière dont il s'adapte aux applications volumineuses et complexes. Il permet également d'activer des outils de développement très puissants, car il est possible de tracer chaque mutation à l'action qui l'a provoquée. Vous pouvez enregistrer des sessions utilisateur et les reproduire simplement en rejouant chaque action.

Apprenez Redux de ses autheurs

Les tutoriaux vidéo de Redux par Dan Abramov

Premiers pas avec Redux

Commencer avec Redux est un cours vidéo composé de 30 vidéos narrées par Dan Abramov, auteur de Redux. Il est pensé pour compléter la partie "Les bases" de la documentation tout en apportant des informations supplémentaires sur l'immutabilité, les tests, les bonnes pratiques pour Redux, et utiliser Redux avec React. Ce cours est gratuit et le restera toujours.

"Très bon cours sur egghead.io par @dan_abramov - au lieu de juste montrer pourquoi vous devez utiliser #redux, il montre aussi comment et pourquoi redux a été créé !"
Sandrino Di Mattia

"Creusez à travers 'Getting Started with Redux' de @dan_abramov - c'est incroyable combien les concepts sont plus simples avec la vidéo."
Chris Dhanaraj

"La série de vidéos sur Redux par @dan_abramov sur @eggheadio est spectaculaire !"
Eddie Zaneski

"Venez pour le nom hype. Resetez pour les fondamentaux solide comme de la roche. (Merci, et très bon travail @dan_abramov et @eggheadio!)"
Dan

"Cette série de vidéo sur Redux par @dan_abramov tourne sans cesse dans mon esprit - je dois sérieusement faire du refactoring"
Laurence Roberts

Alors qu'est-ce vous attendez ?

Regardez la série de vidéos gratuite "Getting Started with Redux"

Note: Si vous aimez les cours de Dan, pensez à supporter Egghead en souscrivant à un abonnement. Les abonnées ont accès au code source pour chaque exemple de mes vidéos et des tonnes de leçons avancées sur d'autres sujets, incluant les profondeurs de JavaScript, React, Angular, et plus. Beaucoup d'instructeurs Egghead sont aussi des auteurs de bibliothèques libres (open source), donc prendre un abonnement est une bonne manière de les remercier pour le travail qu'ils ont fait.

Construisez des applications React avec Redux

Le cours construisez des applications React avec Redux course est la seconde série de vidéos gratuite de Dan Abramov.
Il reprend là où la première série s'est arrêtée, et couvre des techniques prêtes pour la production pour créer vos applications React et Redux : une gestion avancée du state, de middleware, l'intégration de React Router, et d'autres problèmes communs que vous risquez de rencontrer lors de la création d'applications pour vos clients et vos utilisateurs.
Comme avec la première série, ce cours sera toujours gratuit.

Regarder la série de vidéos gratuite "Idiomatic Redux"

Cours pratique - Redux

"Practical Redux" est un cours interactif payant par le co-mainteneur de Redux Mark Erikson.
Le cours est pensé pour montrer comment appliquer les concepts basiques de Redux pour construire quelque chose de plus grand qu'une application de TodoMVC.
Il comprend des sujets du monde réel comme :

  • Ajouter Redux à un nouveau projet créé avec Create-React-App et configurer le rafraîchissement en temps réel (Hot Module Replacement) pour un développement plus rapide.
  • Contrôler votre comportement d'interface utilisateur avec Redux
  • Utilisation de la bibliothèque Redux-ORM pour gérer les données relationnelles dans votre store Redux
  • Construire une vue maître/détail pour afficher et éditer des données
  • Écrire une logique de reducer Redux personnalisé pour résoudre des problèmes spécifiques
  • Optimisation des performances de Redux-connected pour les champs de formulaire

Et plus encore !

Le cours est basé sur la série de tutoriels gratuits "Pratical Redux" du blog de Mark, mais avec du contenu mis à jour et amélioré.

Ateliers sur Redux

Le co-mainteneur de Redux Mark Erikson s'est associé avec Workshop.me pour enseigner une série d'ateliers sur Redux

Le premier atelier Redux Fundamentals se tiendra à New York du 19 au 20 avril et couvrira :

  • L'histoire et le but de Redux
  • Les reducers, les actions et comment travailler avec le store de Redux
  • Utiliser Redux avec React
  • Utiliser et écrire des middlewares Redux
  • Travailler avec des appels AJAX et d'autres effets secondaires
  • Tester unitairement vos applications Redux
  • Structure et développement d'une application Redux dans le monde réel

Les tickets sont toujours disponibles et peuvent être achetés sur Workshop.me.

Documentation

Pour les exportations en PDF, ePub et MOBI pour la lecture hors ligne, vous pouvez consulter les instructions pour les créer ici : paulkogel/redux-offline-docs.

Pour la documentation hors ligne (en anglais) vous pouvez la voir sur devdocs

Exemples

Presque tous les exemples ont un CodeSandbox correspondant. C'est une version interactive du code que vous pouvez voir en ligne.

Si vous êtes nouveau avec l'écosystème de NPM et avez des problèmes pour récupérer et lancer un projet, ou n'êtes pas sûr de savoir où coller l'essentiel des liens ci-dessus, regarder "simplest-redux-example" qui utilise Redux avec React et Broserify.

Témoignages

“J'aime ce que vous faites avec Redux” Jing Chen, créateur de Flux

“J'ai demandé des commentaires sur Redux dans un groupe de discussion interne JS chez Facebook, et il était reconnu universellement. C'est vraiment un travail remarquable.” Bill Fisher, auteur de la documentation de Flux

“C'est bien que vous ayez inventé un meilleur Flux en ne faisant pas du tout comme Flux.” André Staltz, créateur de Cycle

Remerciements

  • L'architecture ELM pour une excellente introduction à la modélisation de mises à jour d'états avec des reducers;
  • Renverser la base de données pour me faire perdre la tête;
  • Développer ClojureScript avec Figwheel pour me convaincre que la réévaluation devrait "juste fonctionner";
  • Webpack pour le rechargement des modifications à chaud (Hot Module Replacement);
  • Flummox pour m'apprendre à approcher Flux sans passe-partout ou singletons;
  • disto pour une preuve de concept de Stores rechargeable à chaud;
  • NuclearJS pour prouver que cette architecture peut-être performante;
  • Om pour populariser l'idée d'un seul état atomique;
  • Cycle pour montrer comment souvent une fonction est le meilleur outil;
  • React pour l'innovation pragmatique.

Remerciement spécial à Jamie Paton pour le transfert du nom du paquet npm 'redux'.

Vous pouvez trouver le logo officiel sur GitHub.

Journal de modifications

Ce projet adhère à "Semantic Versioning".
Chaque version, avec les instructions de migration, est documentée sur la page Releases de GitHub.

Mécènes

Le travail sur Redux a été financé par la communauté.
Rencontrez certaines des entreprises exceptionnelles qui ont rendu ça possible :

Voir la liste complète des clients Redux, ainsi que la liste toujours croissante de personnes et d'entreprises qui utilisent Redux.

License

MIT

results matching ""

    No results matching ""