如何在 React 中使用带有异步数据的 useReducer 钩子？

Question

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

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

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

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

如何在 React 中使用带有异步数据的 useReducer 钩子？

How to use useReducer hook with async data in React?

asynchronous

reactjs

use-reducer