web-dev-qa-db-fra.com

Trop React Fournisseurs de contexte

Nouveau pour réagir ici et essayer de faire le tour de la nouvelle API Context (je n'ai pas encore étudié Redux, etc.).

On dirait que je peux faire une grande partie de ce que je dois faire, mais je vais me retrouver avec beaucoup, beaucoup de fournisseurs, tous ayant besoin d'une balise pour envelopper mon application principale.

Je vais avoir un fournisseur pour Auth, un pour les thèmes, un pour les messages de discussion (vis Pusher.com) etc. Utiliser également React Router est un autre élément wrapper.

Vais-je devoir me retrouver avec ça (et bien d'autres) ....

<BrowserRouter>
    <AuthProvider>
        <ThemeProvider>
            <ChatProvider>
                <App />
            </ChatProvider>
        </ThemeProvider>
    </AuthProvider>
</BrowserRouter>

Ou existe-t-il une meilleure façon?

reactjsreact-context
14
jonhobbs

Avertissement: Je ne l'ai jamais utilisé , juste recherché.

FormidableLabs (ils contribuent à de nombreux projets OSS ) a un projet appelé react-context-composer

Cela semble résoudre votre problème.

React propose une nouvelle API de contexte. L'API encourage la composition. Ce composant utilitaire permet de garder votre code propre lorsque votre composant affichera plusieurs fournisseurs de contexte et consommateurs.

1
dance2die

Quelques lignes de code résolvent votre problème.

import React from "react"
import _ from "lodash"

/**
 * Provided that a list of providers [P1, P2, P3, P4] is passed as props,
 * it renders
 *
 *    <P1>
        <P2>
          <P3>
            <P4>
              {children}
            </P4>
          </P3>
        </P2>
      </P1>
 *
 */

export default function ComposeProviders({ Providers, children }) {
  if (_.isEmpty(Providers)) return children

  return _.reverse(Providers)
    .reduce((acc, Provider) => {
      return <Provider>{acc}</Provider>
    }, children)
}
1
Hellon Canella Machado

Une solution simple pour cela consiste à utiliser quelque chose de similaire pour composer la fonction dans https://github.com/reduxjs/redux/blob/master/src/compose.js et combiner tous les fournisseurs ensemble.

provider.js 

const Providers = compose(
    AuthProvider,
    ThemeProvider,
    ChatProvider
);

je n'ai pas non plus utilisé cette solution mais avec la nouvelle fonctionnalité de hooks de React, au lieu de rendre vos contextes, vous pouvez utiliser le hook de réaction pour y accéder dans la définition de la fonction.

0
Haswin