recipes.js

// slices/recipes.js
import { createSlice } from '@reduxjs/toolkit'

export const initialState = {
  loading: false,
  hasErrors: false,
  recipes: [],
}

// A slice for recipes with our three reducers
const recipesSlice = createSlice({
  name: 'recipes',
  initialState,
  reducers: {
    getRecipes: state => {
      state.loading = true
    },
    getRecipesSuccess: (state, { payload }) => {
      state.recipes = payload
      state.loading = false
      state.hasErrors = false
    },
    getRecipesFailure: state => {
      state.loading = false
      state.hasErrors = true
    },
  },
})

// Three actions generated from the slice
export const { getRecipes, getRecipesSuccess, getRecipesFailure } = recipesSlice.actions

// A selector
export const recipesSelector = state => state.recipes

// The reducer
export default recipesSlice.reducer

// Asynchronous thunk action
export function fetchRecipes() {
  return async dispatch => {
    dispatch(getRecipes())

    try {
      const response = await fetch('https://www.themealdb.com/api/json/v1/1/search.php?s=')
      const data = await response.json()

      dispatch(getRecipesSuccess(data))
    } catch (error) {
      dispatch(getRecipesFailure())
    }
  }
}