Using multiple reducers for different lifecycles

recipes.tsx

  //component state
  const [{ data:initialData, isBusy:isLoading, hasError:loadingFailed, errorMessage:loadingError }, dispatch] = useReducer(
    createActionReducer<Recipe[]>(),
    { isBusy: true, hasError: false }
  );
  const [{ data:updatedData, isBusy:isUpdating, hasError:updateFailed, errorMessage:updateError }, dispatch] = useReducer(
    createActionReducer<Recipe[]>(),
    { isBusy: false, hasError: false }
  );