如何在 React 中使用 useReducer 钩子和异步数据？答案

【问题标题】：How to use useReducer hook with async data in React?如何在 React 中使用 useReducer 钩子和异步数据？
【发布时间】：2021-09-18 16:37:46
【问题描述】：

我正在尝试使用 useReducer 挂钩从 API 获取数据，然后更新状态。由于这是一个小项目，我试图避免使用 useContext，而只是将 dispatch 函数作为 props 向下传递。

我之前的做法是使用普通的 reducer 来操作状态，并使用 asyncReducer 来获取数据，但是我不知道如何将两者结合使用。将不胜感激任何指导。我将在下面提供完整代码的链接。只需访问 repo 并点击句点键 (.) 即可查看它。要查看的主要文件是 App.js、reducer.js 和 letters.jsx

[]https://github.com/robert-levy/cocktail-finder

【问题讨论】：

我不太清楚你所说的异步减速器是什么意思。
reducer 并不意味着有任何需要获取数据的逻辑。
这是我之前参与的一个项目的一部分，它使用异步减速器进行 api 调用，然后使用第二个减速器来操作状态。我想尝试做类似的事情。 codepile.net/pile/vg4WNOe2
不确定是否有其他人可以在这里权衡，但我不确定这是您想要遵循的模式。我从来没听说过。也许是因为我习惯了 Redux，你的异步 api 调用是通过操作处理的，与 reducer 完全分开。也许我错了。
我也没有真正看到这种模式，但我在工作场所提供的 React 课程中看到了它。我对任何其他方式持开放态度，但更愿意避免使用其他软件包，例如还原

标签： reactjs asynchronous use-reducer

【解决方案1】：

通过查看您之前应用程序中的代码，我不确定这会起作用，但让我们看看。更改您需要的任何内容以反映我在这里的内容。

import { reducer, asyncReducer initialState } from './state/reducer'

const App = () => {

  const [state, dispatch] = useReducer(reducer, initialState)

  return (
    <div className="App">
      <NavigationBar />
      <Container>
        <Row>
          <Letters dispatch={asyncReducer(dispatch)} />
        </Row>
        <Row className="justify-content-center">
          <SearchBar />
        </Row>
        <Row>
          <Cocktails />
        </Row>
      </Container>
    </div >
  );
}

【讨论】：

似乎对我有用！非常感谢。