Question

我们的React应用程序通过一个严重依赖诺言的库与API进行对话。

例如，我们可能会传递“用户资源”。渲染User组件时，该组件可以通过调用await User.get()中的componentDidMount来访问用户的属性。

含义是，我们的许多组件（如果不是大多数）都需要具有ready状态属性，并且它们中的大多数都需要处理第一个渲染的情况以及在用户之后进行渲染的情况属性已收到。

这感觉笨拙。我们曾经想到的一个想法是创建专门负责数据加载的组件，然后创建第二组“视图”组件，它们仅在加载完成后负责呈现。

这里的一个问题是“视图”组件通常也是表单，需要在树上传递状态更改。

做起来并不难，但是我主要是想知道是否存在解决这类问题的良好模式，或者我可以以现有技术为基础。另外，我还将就如何处理此模式提出其他建议。

Answer 1

我正在将此组件与redux

一起使用

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Spinner } from "@blueprintjs/core";

export default ({ action, selector, component, errorComponent }) => {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(action());
  }, [dispatch, action]);

  const DispatchFetch = () => {
    const { data, isRequesting, error } = useSelector(selector());
    if (!isRequesting && data) {
      const Comp = component;
      return <Comp data={data}></Comp>;
    } else if (error) {
      if (errorComponent) {
        const ErrorComp = errorComponent;
        return <ErrorComp error={error}></ErrorComp>;
      }
      return <div>{error}</div>;
    }
    return <Spinner></Spinner>;
  };

  return <DispatchFetch></DispatchFetch>;
};

反应和处理异步状态

1 个答案: