Question

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

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

我已经制作了一个自定义钩子“ useFetch”（在此示例中，它并没有太大作用，因为它是简化版本，因此我还必须对其进行一些小的调整才能在codesandbox上工作-请参见下面的代码）。问题在于由于“钩子规则”，我无法在useEffect钩子内使用自定义钩子。因此，如果您有自己的钩子来获取数据，那么在执行下一个等之前如何等待第一个请求的响应？即使我最终放弃了useFetch抽象并创建了一个香草提取请求，如何避免以许多useEffects钩子hook肿而告终？是否可以更优雅地完成此操作，还是上下文+挂钩还为时过早以与redux saga / thunk竞争以处理副作用？

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

查询人员api端点以获取人员
我们有了这个人响应，查询工作端点（使用真实世界中的人员ID 场景）
一旦有了回应，我们就拥有了人选和工作从人员和工作端点，查询同事端点以找到特定工作的同事。

这是代码。在useFetch挂钩中添加了一个延迟，以模拟现实世界中的延迟：

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

Answer 1

挂钩不会取代您处理异步操作的方式，它们只是您曾经做过的某些事情的抽象，例如调用componentDidMount或处理state等。

在您给出的示例中，您实际上不需要自定义钩子：

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>
);

Answer 2

这是现实生活中的常见情况，您要等待第一次提取完成然后再进行下一次提取。

请签出新的代码和框： https://codesandbox.io/s/p92ylrymkj

当您提取请求时，我使用了生成器。以正确的顺序检索数据。单击获取数据按钮后，转到控制台并查看。

希望这就是您想要的。

Answer 3

我相信您会因为获取钩子的实现不佳而遇到此问题，并且该示例对于我们来说太基础了。如果要在同一组件中使用工作，同事和人员，则应明确说明。如果是这样，将它们分开总是明智的。

话虽这么说，让我给你一个我自己的抓取钩子的例子：

const { loading, error, value } = useResource<Person>(getPerson, personId)

我有一个这样的钩子，它具有加载，错误，值等状态。
它有两个参数：
-提取方法
-获取方法参数

具有这种结构，您可以将资源链接在一起。
useResource实现只是创建一个状态并在useEffect中，检查属性是否发生更改等。如果属性发生更改，它将调用fetch方法。

如何使用React钩子处理/链接依赖于另一个的同步副作用

3 个答案: