Je poste normalement des trucs liés au code sur Stack, mais c'est plus une question sur ce que sont les pensées générales de la communauté.

Il semble y avoir beaucoup de gens qui préconisent l'utilisation de Redux avec React pour gérer les données / l'état, mais en lisant et en apprenant les deux, je suis tombé sur quelque chose qui ne semble pas tout à fait correct.

Redux

Au bas de cette page: http://redux.js.org/docs/basics/UsageWithReact.html (Passing the Store) il recommande d'utiliser le "Magic" de React 'Context'.

Une option serait de le transmettre comme accessoire à chaque composant du conteneur. Cependant, cela devient fastidieux, car vous devez câbler le stockage même via des composants de présentation simplement parce qu'ils rendent un conteneur au plus profond de l'arborescence des composants.

L'option que nous recommandons est d'utiliser un composant React Redux spécial appelé pour rendre le magasin disponible par magie à tous les composants du conteneur ...

Réagir

Sur la page React Context ( https://facebook.github.io/react/docs/context.html ), il y a un avertissement en haut:

Le contexte est une fonctionnalité avancée et expérimentale. L'API est susceptible de changer dans les prochaines versions.

Puis en bas:

Tout comme les variables globales sont mieux évitées lors de l'écriture de code clair, vous devez éviter d'utiliser le contexte dans la plupart des cas ...

N'utilisez pas de contexte pour transmettre vos données de modèle à travers les composants. Enfiler explicitement vos données dans l'arbre est beaucoup plus facile à comprendre ...

Alors...

Redux recommande d'utiliser la fonction React 'Context' plutôt que de transmettre le storelong à chaque composant via 'props'. Alors que React recommande le contraire.

Aussi, il semble que Dan Abramov (le créateur de Redux) travaille désormais pour Facebook (le créateur de React), histoire de me dérouter davantage.

• Est-ce que je lis tout cela correctement ..?
• Quel est le consensus général actuel sur cette question…?

Le contexte est une fonctionnalité avancée et est susceptible de changer. Dans certains cas, ses avantages l'emportent sur ses inconvénients, de sorte que certaines bibliothèques comme React Redux et React Router choisissent de s'en remettre malgré la nature expérimentale.

La partie importante ici est le mot bibliothèques . Si le contexte change son comportement, nous, en tant qu'auteurs de bibliothèques , devons nous ajuster . Cependant, tant que la bibliothèque ne vous demande pas d'utiliser directement l'API contextuelle, vous, en tant qu'utilisateur, ne devriez pas avoir à vous soucier de ses modifications.

React Redux utilise le contexte en interne, mais il n'expose pas ce fait dans l'API publique. Vous devriez donc vous sentir beaucoup plus en sécurité en utilisant le contexte via React Redux que directement car si cela change, le fardeau de la mise à jour du code sera sur React Redux et non sur vous.

En fin de compte, React Redux prend toujours en charge le fait de toujours passer store comme accessoire, donc si vous voulez éviter complètement le contexte, vous avez ce choix. Cependant, je dirais que ce n'est pas pratique.

TLDR: évitez d'utiliser directement le contexte à moins que vous ne sachiez vraiment ce que vous faites. L'utilisation d'une bibliothèque qui s'appuie sur le contexte en interne est relativement sûre.

Je ne sais pas pour les autres, mais je préfère utiliser le décorateur de connexion de react-redux pour envelopper mes composants de sorte que seuls les accessoires du magasin dont j'ai besoin soient passés dans mon composant. Cela justifie l'utilisation du contexte dans un sens parce que je ne le consomme pas (et je sais, en règle générale, aucun code dont je suis en charge ne le consommera pas).

Lorsque je teste mes composants, je teste le composant non encapsulé. Parce que react-redux n'a passé que les accessoires dont j'avais besoin sur ce composant, je sais maintenant exactement de quels accessoires j'ai besoin lorsque j'écris les tests.

Je suppose que le fait est que je ne vois jamais le mot context dans mon code, je ne le consomme pas, donc dans une certaine mesure, cela ne m'affecte pas! Cela ne dit rien sur l'avertissement "expérimental" de Facebook. Si le contexte disparaissait, je serais aussi foutu que tout le monde jusqu'à ce que Redux soit mis à jour.

Il existe un module npm qui facilite l'ajout de redux au contexte de réaction

https://github.com/jamrizzi/redux-context-provider

https://www.npmjs.com/package/redux-context-provider

import React, { Component } from 'react';
import ReduxContextProvider from 'redux-context-provider';
import createStore from './createStore';
import actions from './actions';
import Routes from './routes';

export default class App extends Component {
  render() {
    return (
      <ReduxContextProvider store={store} actions={actions}>
        <Routes />
      </ReduxContextProvider>
    );
  }
}