| // 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()) | |
| } | |
| } | |
| } |