CODEWITHSUNDEEP
reactjsreduxfrontendfetchthunk
AlexGherasim
AlexGherasim

Reputation: 11

SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON when Fetching Data

I am trying to fetch some data for my project, using Redux Thunk but i get the error which appears in the screenshot. This is the error](https://i.sstatic.net/6Dqtm.png)

My thunk function `

export const fetchCategoriesStart = () => createAction(CATEGORIES_ACTION_TYPES.FETCH_CATEGORIES_START);

export const fetchCategoriesSuccess = (categoriesArray) => createAction(CATEGORIES_ACTION_TYPES.FETCH_CATEGORIES_SUCCESS, categoriesArray);

export const fetchCategoriesFailed = (error) => createAction(CATEGORIES_ACTION_TYPES.FETCH_CATEGORIES_FAILED, error);

export const fetchCategoriesAsync = () => async (dispatch) => {
  dispatch(fetchCategoriesStart())
  try {
    const response = await fetch('../../menu.json');
    const categoriesArray = await response.json()
    dispatch(fetchCategoriesSuccess(categoriesArray));
  } catch (error){
    dispatch(fetchCategoriesFailed(error));
  }
}

`

The component where I dispatch the thunk function: `

import { fetchCategoriesAsync } from "../../store/menu/menu.action";
import { useDispatch } from "react-redux";
import { useEffect } from "react";

const Menu = () => {

  const dispatch = useDispatch()

  useEffect(() => {
    dispatch(fetchCategoriesAsync());
  }, [])

}`

I tried to fetch some products from a json file using Redux Thunk and I expected the payload to be the array of the products

Upvotes: 1

Views: 926

Answers (0)

Related Questions