web-dev-qa-db-fra.com

React avec Redux? Qu'en est-il du problème du "contexte"?

Je poste normalement des éléments liés au code sur Stack, mais il s’agit plus d’une question sur l’opinion générale de la communauté.

Il semble que beaucoup de gens préconisent l’utilisation de Redux avec React pour gérer les données/l’état, mais lors de la lecture et de l’apprentissage, j’ai rencontré quelque chose qui n’allait pas vraiment.

Redux

Au bas de cette page: http://redux.js.org/docs/basics/UsageWithReact.html (Passing the Store), il est recommandé d’utiliser le "Magic" de React 'Contexte'.

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

Nous recommandons d’utiliser un composant spécial React Redux appelé pour rendre le magasin accessible par magie à tous les composants de conteneur ...).

React

Sur la page de contexte React ( https://facebook.github.io/react/docs/context.html )), un avertissement s'affiche 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 il est préférable d'éviter les variables globales lors de l'écriture de code clair, vous devriez éviter d'utiliser le contexte dans la plupart des cas ...

N'utilisez pas le contexte pour transmettre les données de votre modèle à travers des composants. Il est beaucoup plus facile de comprendre vos données dans l'arborescence de manière explicite ...

Alors...

Redux recommande d'utiliser la fonctionnalité React "Contexte" plutôt que de transmettre le store à chaque composant via "props". While React recommande L'opposé.

De plus, il semble que Dan Abramov (le créateur de Redux) travaille maintenant pour Facebook (le créateur de React), histoire de me confondre davantage.

  • Est-ce que je lis tout ça bien ..?
  • Quel est le consensus général actuel sur cette question ..?
javascriptreactjsredux
85
Stephen Last

Le contexte est une fonctionnalité avancée et est sujet à changement. Dans certains cas, ses commodités l'emportent sur ses inconvénients, de sorte que certaines bibliothèques telles que React Redux et React Le routeur a été choisi, malgré son caractère expérimental).

La partie importante ici est les bibliothèques Word . Si le contexte change de comportement, les auteurs de bibliothèques devront ajuster . Toutefois, tant que la bibliothèque ne vous demandera pas d’utiliser directement l’API de contexte, vous ne devriez pas, en tant qu’utilisateur, vous inquiéter des modifications qui y sont apportées.

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

En fin de compte React Redux supporte toujours le passage de magasin comme accessoire, donc si vous voulez éviter complètement le contexte, vous avez le choix. Cependant, je dirais que cela n’est pas pratique.

TLDR: Évitez d’utiliser le contexte directement à moins que vous ne sachiez vraiment ce que vous faites. Utiliser une bibliothèque qui dépend du contexte en interne est relativement sûr.

85
Dan Abramov

Je ne connais pas les autres, mais je préfère utiliser le décorateur connect de react-redux pour envelopper mes composants de manière à ce 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 car I je ne le consomme pas (et je connais, en règle générale, tout code que je suis responsable de la volonté pas le consommer).

Lorsque je teste mes composants, je teste le composant non enveloppé. Parce que react-redux n'a fait que passer les accessoires dont j'avais besoin pour ce composant, je sais maintenant exactement de quels accessoires j'ai besoin pour écrire les tests.

Je suppose que le fait est que je ne vois jamais le contexte Word dans mon code, je ne le consomme pas, donc dans une certaine mesure, cela ne me concerne pas! Cela ne dit rien de 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.

4
mjohnsonengr

Il existe un module npm qui facilite vraiment 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>
    );
  }
}
1
Jam Risser