Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
// 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())
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.