我正在尝试将我的应用程序从 redux 重写为新的上下文 + Hook ，但不幸​​的是，我很难找到一种好方法来处理一系列依赖于前一个响应的同步副作用。

在我当前的 redux 应用程序中，我大量使用同步/链接操作和 API 请求，我通常通过 redux-saga 或 thunk 处理这些请求。因此，当返回第一个 API 请求的响应时，该数据将用于下一个 API 请求等。

我做了一个自定义钩子(Hook)“useFetch”(在这个例子中它没有做太多，因为它是一个简化的版本，我还必须做一个小的调整才能在 codesandbox 上工作 - 请参见下面的代码)。问题在于，由于“钩子(Hook)规则”，我不能在 useEffect 钩子(Hook)中使用自定义钩子(Hook)。那么，如果您有自己的获取数据的钩子(Hook)，如何在执行下一个请求之前等待第一个请求的响应呢？即使我最终放弃了 useFetch 抽象并创建了一个普通的获取请求，如何避免以许多 useEffects Hook 的臃肿困惑结束？这可以做得更优雅一点，还是上下文 + 钩子(Hook)与 redux saga/thunk 竞争处理副作用还为时过早？

下面的示例代码非常简单。它应该尝试模拟的是:

1. 查询人员 api 端点以获取人员
2. 一旦我们有了这个人 响应，查询工作端点(使用现实世界中的人员 ID 情景)
3. 根据回复确定人员和工作 从 person 和 job 端点，查询 collegues 端点到 找到从事特定工作的同事。

这是代码。为 useFetch 钩子(Hook)添加延迟以模拟现实世界中的延迟:

import React, { useEffect, useState } from "react";
import { render } from "react-dom";

import "./styles.css";

const useFetch = (url, delay = 0) => {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      // const result = await fetch(url, {
      //  method: "GET",
      //  headers: { "Content-Type": "application/json" }
      // });
      //const response = await result.json();
      const response = await import(url);
      setTimeout(function() {
        setData(response);
      }, delay);
    };

    fetchData();
  }, [url]);

  return data;
};

function App() {
  const [person, setPerson] = useState();
  const [job, setJob] = useState();
  const [collegues, setCollegues] = useState();

  // first we fetch the person /api/person based on the jwt most likely
  const personData = useFetch("./person.json", 5000);
  // now that we have the person data, we use the id to query for the
  // persons job /api/person/1/jobs
  const jobData = useFetch("./job.json", 3000);
  // now we can query for a persons collegues at job x /api/person/1/job/1/collegues
  const colleguesData = useFetch("./collegues.json", 1000);

  console.log(personData);
  console.log(jobData);
  console.log(colleguesData);

  // useEffect(() => {
  //   setPerson(useFetch("./person.json", 5000));
  // }, []);

  // useEffect(() => {
  //   setJob(useFetch("./job.json", 3000));
  // }, [person]);

  // useEffect(() => {
  //   setCollegues(useFetch("./collegues.json",1000));
  // }, [job]);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

const rootElement = document.getElementById("root");
render(<App />, rootElement);

运行示例:https://codesandbox.io/s/2v44lron3n?fontsize=14 (您可能需要进行更改 - 空格或删除分号 - 以使其工作)

希望这样的事情(或更好的解决方案)是可能的，否则我将无法从令人敬畏的 redux-saga/thunks 迁移到 context + hooks。

最佳答案: https://www.youtube.com/watch?v=y55rLsSNUiM

最佳答案

Hooks 不会取代你处理异步操作的方式，它们只是对你习惯做的一些事情的抽象，比如调用 componentDidMount，或者处理 state 等.

在您给出的示例中，您实际上并不需要自定义 Hook :

function App() {
  const [data, setData] = useState(null);
  useEffect(() => {
    const fetchData = async () => {
      const job = await import("./job.json");
      const collegues = await import("./collegues.json");
      const person = await import("./person.json");
      setData({
        job,
        collegues,
        person
      })
    };
    fetchData()
  }, []);

  return <div className="App">{JSON.stringify(data)}</div>;
}

话虽这么说，也许如果您提供一个实际的 redux-saga 或您拥有的 thunk 代码的示例，您想要重构，我们可以看到实现该目标的步骤。

编辑:

话虽这么说，如果你还想做这样的事情，你可以看看这个:

https://github.com/dai-shi/react-hooks-async

import React from 'react';

import { useFetch } from 'react-hooks-async/dist/use-async-task-fetch';

const UserInfo = ({ id }) => {
  const url = `https://reqres.in/api/users/${id}?delay=1`;
  const { pending, error, result, abort } = useFetch(url);
  if (pending) return <div>Loading...<button onClick={abort}>Abort</button></div>;
  if (error) return <div>Error:{error.name}{' '}{error.message}</div>;
  if (!result) return <div>No result</div>;
  return <div>First Name:{result.data.first_name}</div>;
};

const App = () => (
  <div>
    <UserInfo id={'1'} />
    <UserInfo id={'2'} />
  </div>
);

编辑

这是一个有趣的方法 https://swr.now.sh/#dependent-fetching

关于javascript - 如何使用 React hooks 处理/链接依赖于另一个的同步副作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55550373/