title: Redux action doesn't dispatch after page refresh
body: <p>I have an issue with redux and probably useEffect(I am not sure where my mistake is). I am trying to get information from <a href="https://pokeapi.co" rel="nofollow noreferrer">PokeAPI</a> and store information in the redux state. The problem is that the information about pokemons don't include pokemon types(fire, water, etc.), to solve this I am sending requests to fetch those types from a different endpoint and I want to include these types of specific pokemon to redux state.</p>
  <p><strong><a href="https://i.stack.imgur.com/9NxDV.png" rel="nofollow noreferrer">1-redux state without types of pokemons</a></strong></p>
  <p><strong><a href="https://i.stack.imgur.com/L23dK.png" rel="nofollow noreferrer">2-redux state with types of pokemons</a></strong></p>
  <p>My goal is to have a state like in the second picture with types. But when I refresh the page, I only acquire the first picture(actions aren't dispatching). When I change something in my code and save it, I get types as well. I suspect that my problem is in the useEffect, but I couldn't find a solution without creating some nasty loops.</p>
  <p><strong>Note: Page parameter in fetchData coming from PokeAPI, it basically returns 15 pokemon for every page.(For now I am just experimenting on the first page)</strong></p>
  <p>This is my first question in stackoverflow, I already searched for similar questions but those were dealing with different aspects, so I decided to ask myself.</p>
  <p><strong>PokemonList.js --&gt; this is where I need those types</strong></p>
  <pre><code>import React, { useEffect } from 'react';
  import { ListGroup, ListGroupItem } from &quot;react-bootstrap&quot;;
  import { useDispatch, useSelector } from 'react-redux';
  import _ from &quot;lodash&quot;;
  import { GetPokemonList, GetSpecificPokemon } from '../redux/actions/PokemonAction';
  import { Button } from 'react-bootstrap';
  
  const PokemonList = () =&gt; {
    const dispatch = useDispatch();
    const pokemonList = useSelector(state =&gt; state.PokemonList);
  
    useEffect(() =&gt; {
      const fetchData = (page = 1) =&gt; {
        dispatch(GetPokemonList(page));
      }
  
      fetchData();
  
    }, [dispatch]);
  
    useEffect(() =&gt; {
      const fetchTypes = () =&gt; {
        pokemonList.data.forEach(pokemon =&gt; {
          dispatch(GetSpecificPokemon(pokemon.name));
        });
      }
  
      fetchTypes();
      
    }, [dispatch]);
  
  
    const showData = () =&gt; {
      if (!_.isEmpty(pokemonList.data)) {
        return (
          &lt;div className=&quot;pokemon-list-wrapper&quot;&gt;
            {pokemonList.data.map((pokemon, index) =&gt; {
              return (
                &lt;div className=&quot;pokemon-list-element&quot; key={index}&gt;
                  &lt;ListGroup&gt;
                    &lt;ListGroupItem action href={`/pokemon/${pokemon.name}`} variant=&quot;success&quot;&gt;{pokemon.name}
                      &lt;Button style={{ float: &quot;right&quot; }}&gt;Test&lt;/Button&gt;
                    &lt;/ListGroupItem&gt;
                  &lt;/ListGroup&gt;
                &lt;/div&gt;
              )
            })}
          &lt;/div&gt;
        )
      }
  
      if (pokemonList.loading) {
        return &lt;p&gt;Loading...&lt;/p&gt;
      }
  
      if (pokemonList.errorMessage !== &quot;&quot;) {
        return &lt;p&gt;{pokemonList.errorMessage}&lt;/p&gt;
      }
    };
    return (
      &lt;div&gt;
        {showData()}
      &lt;/div&gt;
    )
  };
  
  export default PokemonList;
  </code></pre>
  <p><strong>PokemonAction.js</strong></p>
  <pre><code>import axios from &quot;axios&quot;
  
  export const GetPokemonList = (page) =&gt; async (dispatch) =&gt; {
    try {
      dispatch({
        type: &quot;POKEMON_LIST_LOADING&quot;
      });
  
      const perPage = 15;
      const offset = (page * perPage) - perPage;
  
      const res = await axios.get(`https://pokeapi.co/api/v2/pokemon?limit=${perPage}&amp;offset=${offset}`);
  
      dispatch({
        type: &quot;POKEMON_LIST_SUCCESS&quot;,
        payload: res.data
      });
    } catch (e) {
      dispatch({
        type: &quot;POKEMON_LIST_FAIL&quot;
      });
    }
  }
  
  export const GetSpecificPokemon = (name) =&gt; async (dispatch) =&gt; {
    try {
      const res = await axios.get(`https://pokeapi.co/api/v2/pokemon/${name}`);
  
      dispatch({
        type: &quot;SPECIFIC_POKEMON_SUCCESS&quot;,
        payload: res.data
      });
    } catch (e) {
      dispatch({
        type: &quot;SPECIFIC_POKEMON_FAIL&quot;
      });
    }
  }
  </code></pre>
  <p><strong>PokemonListReducer.js</strong></p>
  <pre><code>const initialState = {
    data: [],
    loading: false,
    errorMessage: &quot;&quot;,
    count: 0
  };
  
  const PokemonListReducer = (state = initialState, action) =&gt; {
    switch (action.type) {
      case &quot;POKEMON_LIST_LOADING&quot;:
        return {
          ...state,
          loading: true,
          errorMessage: &quot;&quot;
        };
      case &quot;POKEMON_LIST_FAIL&quot;:
        return {
          ...state,
          loading: false,
          errorMessage: &quot;unable to get pokemon&quot;
        };
  
      case &quot;POKEMON_LIST_SUCCESS&quot;:
        return {
          ...state,
          loading: false,
          data: action.payload.results,
          errorMessage: &quot;&quot;,
          count: action.payload.count
        };
  
      case &quot;SPECIFIC_POKEMON_SUCCESS&quot;:
        const typesMap = action.payload.types.map((type) =&gt; {
          return type.type.name;
        })
        return {
          ...state,
          data: state.data.map((pokemon) =&gt; pokemon.name === action.payload.name 
                                    ? {...pokemon, types: typesMap}
                                    : pokemon
        ),
          loading: false,
          errorMessage: &quot;&quot;
        }
      case &quot;SPECIFIC_POKEMON_FAIL&quot;:
        return {
          ...state,
          loading: false,
          errorMessage: &quot;unable to get pokemon&quot;
        };
      default:
        return state
    }
  }
  
  export default PokemonListReducer;
  </code></pre>