Реагируйте лениво с помощью TypeScript и Redux - PullRequest
Новая
       24

Реагируйте лениво с помощью TypeScript и Redux

2 голосов
/ 22 апреля 2020

У меня проблема с комбинированием React lazy с моим проектом, который использует TypeScript и Redux. Вот мой код: 

// lazy-area.tsx
const LazyArea = ({text}: Props): JSX.Element => {
    ....
};

export const LazyArea = connect(
mapStateToProps,
mapDispatchToProps
)(LazyArea);


//Menu.tsx
import React, { lazy, Suspense } from 'react';
....
const lazyArea = lazy(() => import('./lazy-area'));

const Menu = ({
    .....
  }: Props): JSX.Element | null => {
      return (
        <Suspense fallback={LoadingView}>
            <LazyArea />
        </Suspense>
      )
    export const Menu = connect(
    mapStateToProps,
    mapDispatchToProps
    )(Menu);
});

При такой настройке я получаю сообщение об ошибке: 

Type 'Promise<typeof import("/home/user/app/lazy-area")>' is not assignable to type 'Promise<{ default: ComponentType<any>; }>'.
  Property 'default' is missing in type 'typeof import("/home/user/app/src/lazy-area")' but required in type '{ default: ComponentType<any>; }'.

Я пробовал решения, представленные в: TypeScript с React Lazy, получая ошибку обещания для добавления export as ComponentType<any> и export as React.FC к экспорту LazyArea, но ошибка остается прежней.

Решение, представленное в здесь , устраняет ошибку, но согласно this решение - это не лучшая практика, и «может убить оптимизацию и потенциально привести к бесконечному l oop».

Эта ошибка также исчезает при использовании экспорта по умолчанию в LazyArea: 

const LazyArea = connect(
mapStateToProps,
mapDispatchToProps
)(LazyArea);

export default LazyArea;

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

Есть ли какое-нибудь хорошее решение, чтобы обойти эту проблему? Пожалуйста, сообщите, если я представил слишком мало информации о чем-то. Спасибо:)

...