React로 앱을 개발하고 있다면 다음과 같은 상황에 직면했을 수 있습니다.

function App() {
  return (
    <AuthProvider>
      <DataProvider>
        <AnotherDataProvider>
          <WtfProvider>
            <ThisIsGettingReallyBigProvider>
              <OhMyGodTheresMoreProvider>
                <FinallySomeRealComponents />
              </OhMyGodTheresMoreProvider>
            </ThisIsGettingReallyBigProvider>
          </WtfProvider>
        </AnotherDataProvider>
      </DataProvider>
    </AuthProvider>
  );
}

그것이 사람들이 Provider Hell이라고 부르는 것이고 저는 이런 종류의 코드를 더 읽기 쉽게 만들기 위해 이 도구를 만들었습니다.

다음은 react-component-pack 유틸리티를 사용한 동일한 예입니다.

import { createPack } from 'react-component-pack';

const ProviderPack = createPack(
  AuthProvider,
  DataProvider,
  AnotherDataProvider,
  WtfProvider,
  ThisIsGettingReallyBigProvider,
  OhMyGodTheresMoreProvider
);

function App() {
  return (
    <ProviderPack>
      <FinallySomeRealComponents />
    </ProviderPack>
  );
}

NOTE: This utility won't allow you to pass props to a specific provider. Feel free to submit a PR 😁

호루스굴 / 반응 구성 요소 팩

컨텍스트 공급자 그룹을 만들 수 있는 라이브러리

반응 구성 요소 팩 ·

여러 구성 요소를 하나의 구성 요소로 그룹화할 수 있는 유틸리티인 react-component-pack으로 공급자 지옥에 작별을 고하세요.

npm install react-component-pack

용법

react-component-pack를 사용하면 다음에서 이동할 수 있습니다.

function App() {
  return (
    <AuthProvider>
      <DataProvider>
        <AnotherDataProvider>
          <WtfProvider>
            <ThisIsGettingReallyBigProvider>
              <OhMyGodTheresMoreProvider>
                <FinallySomeRealComponents />
              </OhMyGodTheresMoreProvider>
            </ThisIsGettingReallyBigProvider>
          </WtfProvider>
        </AnotherDataProvider>
      </DataProvider>
    </AuthProvider>
  );
}

이에:

import { createPack } from 'react-component-pack';

const ProviderPack = createPack(
  AuthProvider,
  DataProvider,
  AnotherDataProvider,
  WtfProvider,
  ThisIsGettingReallyBigProvider,
  OhMyGodTheresMoreProvider
);

function App() {
  return (
    <ProviderPack>
      <FinallySomeRealComponents />
    </ProviderPack>
  );
}

View on GitHub