How to use useReducer hook with async data in React?-CodePudding

I'm trying to use the useReducer hook to fetch data from an API and then update state. Since this is a small project, I'm trying to avoid using useContext, and instead just passing the dispatch function down as props.

How I've done it before is using a normal reducer for manipulating state, and an asyncReducer for fetching data, however I can't figure out how to use the two together. Would appreciate any guidance. I'll supply a link to the full code below. Just visit the repo and hit the period key (.) to view it. Main files to look at are App.js, reducer.js and letters.jsx

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

CodePudding user response：

From checking out the code from your prior application, I'm not positive this will work, but let's see. Change whatever you need to reflect what I have here.

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