使用 TypeScript 和 Redux 响应惰性答案

【问题标题】：React lazy with TypeScript and Redux使用 TypeScript 和 Redux 响应惰性
【发布时间】：2020-04-22 15:58:04
【问题描述】：

我在将 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 with React Lazy getting promise error 将 export as ComponentType<any> 和 export as React.FC 添加到 LazyArea 导出，但错误保持不变。

中提出的解决方案 here 消除了错误，但根据this，该解决方案不是最佳实践，并且“可能会终止优化并可能导致无限循环”。

在 LazyArea 中使用导出默认值时，此错误也会消失：

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

export default LazyArea;

但是，我从一些来源中了解到，应该避免使用导出默认值。

有什么好的解决方案可以解决这个问题吗？如果我提供的信息太少，请告知。谢谢:)

【问题讨论】：

可悲的事实是 React.lazy 在当前状态下仅适用于默认导出。您尝试以任何方式执行此操作 - 都是假装我们有默认导出的 hacky 解决方法。文档本身中提到的目前被认为是最好的 hacky 解决方法 (reactjs.org/docs/code-splitting.html#named-exports)
好吧，我想使用默认导出将不得不这样做。谢谢:)
第一个问题很好！

标签： javascript reactjs typescript lazy-loading

【解决方案1】：

我不知道您为什么认为应该避免使用默认导出 :) 我认为这只是一些团队的惯例。所以添加export default LazyArea; 是解决这个问题的有效方法。无论如何，你不会有太多的惰性模块。

这就是为什么 React docs 的解决方案也可以在您将默认导出放入其自己的文件的情况下工作。

另一种推荐的方法是更改导入代码以将其转换为默认内联：

const LazyArea = React.lazy(() =>
  import("./lazy-area").then((module) => ({
    default: module.LazyArea,
  }))
);

但这对我来说似乎工作太多了 :) 所以我创建了 react-lazily，它可以满足您的期望。

示例

const { LazyArea } = lazily(() => import('./lazy-area'));

它只是React.lazy 的一个小包装，但它允许您拥有一个非常直接的代码，就像这样：

import { lazily } from 'react-lazily';
const { Component1, Component2 } = lazily(() => import('./Components'))

【讨论】：