title: How to initialize state with api's data
body: <p>I'm creating a React/Redux app that fetches data from an api (pokeapi.co). I fetch data using <code>axios</code>. When I display data on react components, it results in an error that data is <code>undefined</code>. After some digging, I find that my state at first returns initial state which is empty object then it returns the api data. but it dont display on react. I'm new to React so I'm guessing it has to do with the axios asynchronous functionality. How do you set state with api's initial data or wait on rendering the data till state has api's data? </p>
  
  <p>Here is the Reducer</p>
  
  <pre><code>function pokemonReducer(state={}, action) {
      switch (action.type) {
          case pokemonsActions.GET_POKEMON_SUCCESS:
              {
                  return  {...state, data: action.payload.data}
              }
  
          default:
              {
                  return state;
              }
      }
  }
  
  export default pokemonReducer
  </code></pre>
  
  <p>Here is the action</p>
  
  <pre><code>export const GET_POKEMON_SUCCESS = 'GET_POKEMON_SUCCESS'
  export const GET_POKEMON_ERROR = 'GET_POKEMON_ERROR'
  
  function getPokemonSuccess(response) {
      return {
          type: GET_POKEMON_SUCCESS,
          payload: response
      }
  
  }
  
  function getPokemonError(err) {
      return {
          type: GET_POKEMON_ERROR,
          payload: err
      }
  }
  export function getPokemon() {
      return (disp,getState) =&gt; 
               {
                  return pokeAPI.getPokeAPI()
                                .then((response) =&gt; { disp(getPokemonSuccess(response))})
                                .catch((err)=&gt; disp(getPokemonError(err)))
  
               }
  }
  </code></pre>
  
  <p>Store</p>
  
  <pre><code>const loggerMiddleware = createLogger()
  const middleWare= applyMiddleware(thunkMiddleware,loggerMiddleware);
  
  const store = createStore(rootReducer,preloadedState,
   compose(middleWare, typeof window === 'object' &amp;&amp; typeof window.devToolsExtension !== 'undefined'
    ? window.devToolsExtension() : (f) =&gt; f
  ))
  
  
  const preloadedState=store.dispatch(pokemonActions.getPokemon())
  
  export default store
  </code></pre>
  
  <p>in React component</p>
  
  <pre><code>function mapStateToProps(state) {
    return {
      pokemons:state.pokemons
    }
  }
  
      class PokemonAbility extends React.Component {
  
          render(){
              return (
                  &lt;div&gt;
                  &lt;div className="header"&gt;
                    &lt;h1&gt;Fetch Poke Api with axios&lt;/h1&gt;
                   &lt;/div&gt;
                      &lt;main&gt;
                      &lt;h3&gt; Display pokemons abilities &lt;/h3&gt;
                          &lt;p&gt;{this.props.pokemons.data.count}&lt;/p&gt;
                      &lt;/main&gt;
                  &lt;/div&gt;
                  )
          }
      }
  
  
      export default connect(
        mapStateToProps
      )(PokemonAbility)
  </code></pre>
  
  <p>Api data example </p>
  
  <pre><code>{
      "count": 292,
      "previous": null,
      "results": [
          {
              "url": "https://pokeapi.co/api/v2/ability/1/",
              "name": "stench"
          },
          {
              "url": "https://pokeapi.co/api/v2/ability/2/",
              "name": "drizzle"
          },
          {
              "url": "https://pokeapi.co/api/v2/ability/3/",
              "name": "speed-boost"
          }
      ],
      "next": "https://pokeapi.co/api/v2/ability/?limit=20&amp;offset=20"
  }
  </code></pre>