CODEWITHSUNDEEP
javascriptreactjsapireduxaxios
Alamin
Alamin

Reputation: 2165

Unhandled Rejection (TypeError): Cannot read property

I am sure that my api is successfully connected with popularGamesURL upcomingGamesURL and newGamesURL

when I try to fetch my api then show me error:

Unhandled Rejection (TypeError): Cannot read property 'popular' of undefined

I have tried this way

gamesAction.js file:

import axios from "axios";
import { popularGamesURL, upcomingGamesURL, newGamesURL } from "../api";

//Action creator

export const loadGames = () => async (dispatch) => {
  //Fetch axios
  const popularData = await axios.get(popularGamesURL());
  const newGamesData = await axios.get(newGamesURL());
  const upcomingData = await axios.get(upcomingGamesURL());

  dispatch({
    type: "FETCH_GAMES",
    paylaod: {
      popular: popularData.data.results,
      upcoming: upcomingData.data.results,
      newGames: newGamesData.data.results,
    },
  });
};

gamesReducer.js file:

const initialState = {
  popular: [],
  newGames: [],
  upcoming: [],
  searched: [],
};

const gamesReducer = (state = initialState, action) => {
  switch (action.type) {
    case "FETCH_GAMES":
      return {
        ...state,
        popular: action.payload.popular,
        upcoming: action.payload.upcoming,
        newGames: action.payload.newGames,
      };
    default:
      return {
        ...state,
      };
  }
};

export default gamesReducer;

I'm tried to find error.

Any suggestion please.

Upvotes: 0

Views: 234

Answers (1)

zhulien
zhulien

Reputation: 5695

You're dispatching an action with a wrong property name of paylaod(note the ao instead of oa) in your gamesAction.js and you're expecting a property named payload in your reducer.

  dispatch({
    type: "FETCH_GAMES",
    paylaod: { // <=== this
      popular: popularData.data.results,
      upcoming: upcomingData.data.results,
      newGames: newGamesData.data.results,
    },
  });

A simple typo which you should have all the means to debug yourself locally.

Upvotes: 1

Related Questions