useCreateThing.js

export function useCreateThing() {
 const dispatch = Redux.useDispatch()
 
 return React.useCallback(async (thing) => {
   dispatch({ type: 'createThing' })
   
   const response = await fetch('/api/thing/create', { body: thing })
   
   if (response.ok) {
     dispatch({ type: 'createThingSuccess', response });
   else {
     dispatch({ type: 'createThingFailure' })
   }
 }, [dispatch])
}

useGetThing.js

export function useGetThing() {
 const dispatch = Redux.useDispatch()
 
 const getThing = React.useCallback(async () => {
   dispatch({ type: 'getThing' })
   
   const response = await fetch('/api/thing')
   
   if (response.ok) {
     dispatch({ type: 'getThingSuccess', response });
   else {
     dispatch({ type: 'getThingFailure' })
   }
 }, [dispatch])
 
 React.useEffect(() => {
   getThing();
 }, [getThing])
}

This could be:

export function useGetThing() {
 const dispatch = Redux.useDispatch()
 
 React.useEffect(() => {
    dispatch({ type: 'getThing' })
   
    fetch('/api/thing').then(response => {   
      if (response.ok) {
         dispatch({ type: 'getThingSuccess', response });
      else {
         dispatch({ type: 'getThingFailure' })
       }
    });
 }, [getThing])
}

Unlike usual, I'm not just converting to promises for the troll :P It means you don't need to make the function async and can drop it in the useEffect directly

@kirkobyte - definitely ! - Can use Promise.catch too 🙌

I quite like it! Although... Seeing it spelt out like this, makes me more keen for migrating everything I use to redux-toolkit's createAsyncThunk https://redux-toolkit.js.org/api/createAsyncThunk

@kirkobyte yeh man I think I would use redux-toolkit if I was starting a Redux project from scratch - or adding a large new feature to an existing project.