pokemonDataContext

import React, { createContext, useReducer, useEffect, useState } from 'react';
import axios from 'axios';

import {
  GET_POKEMON_LIST,
  SET_POKEMON_LIST,
  SET_POKEMON_LIST_SUCCESS,
  initialPokemonListState,
  pokemonListReducer,
} from '../reducers/pokemonListReducer';

export const PokemonDataContext = createContext();

const PokemonDataProvider = (props) => {
  const [pokemonList, dispatch] = useReducer(pokemonListReducer, initialPokemonListState);

  useEffect(() => {
    const fetchData = async () => {
      dispatch({ type: GET_POKEMON_LIST })
      try{
        const result = await axios(pokemonList.pokeListUrl);
        dispatch({ type: SET_POKEMON_LIST_SUCCESS, payload: result.data });
      } catch (err) {
        dispatch({ type: SET_POKEMON_LIST });
      }
    }

    fetchData();
  }, []);

  return (
    <PokemonDataContext.Provider value={{ ...pokemonList, dispatch }}>
      {props.children}
    </PokemonDataContext.Provider>
  )
}

export default PokemonDataProvider;