Как сделать React-провайдеров рекурсивно? - PullRequest
Новая
       5

Как сделать React-провайдеров рекурсивно?

0 голосов
/ 07 апреля 2020

У меня есть n количество компонентов провайдера, которые обеспечивают контекст для моих магазинов MobX: 

function App({ children }) {
  const owner = createStore(() => OwnerStore);
  const OwnerProvider = useProvider(OwnerStoreID);

  const cat = createStore(() => CatStore);
  const CatProvider = useProvider(CatStoreID);

  return (
    <OwnerProvider value={owner}>
      <CatProvider value={cat}>
        {children}
      </CatProvider>
    </OwnerProvider>
  );
}

Однако количество отдельных магазинов в моем приложении на самом деле исчисляется десятками, и я не надену не хочу поддерживать рождественскую елку вложенных провайдеров.

Я пытался написать что-то вроде этого: 

const storesConfig = [
  {
    store: OwnerStoreID,
    id: OwnerStoreID,
  },
]

export const StoresProvider = ({ children }) => {
  const createdStores = storesConfig.map((storeConfig) =>
    createStore(() => storeConfig.store)
  )
  const createdProviders = storesConfig.map((storeConfig) =>
    useProvider(storeConfig.id)
  )

  return createdProviders.reduce((Acc, Cur, index) => {
    const child =
      index < createdProviders.length ? (
        <Cur value={createdStores[index]} />
      ) : (
        <Cur value={createdStores[index]}>{children}</Cur>
      )
    if (Acc) {
      return <Acc value={createdStores[index - 1]}>{child}</Acc>
    } else {
      return Cur
    }
  }, null)
}

Однако я столкнулся со многими неразборчивыми ошибками TypeScript. Что я делаю неправильно? Конечно, есть способ рекурсивной сборки дерева компонентов React?

1 Ответ

0 голосов
/ 08 апреля 2020

Если ошибки происходят из машинописного текста, это, вероятно, связано с тем, что машинописный текст не может следить за тем, что ты делаешь (где-то на пути types потерял). Попробуйте написать код в javascript и посмотри, нет ли в нем ошибок.

...