Call API with React Redux, Axios

Question

Sorry for my bad english and my bad logic, i wanted use pokeapi.co for my Pokedex.

My problem : i need display the props who content the informations from api. I can receive informations in my console.log(response) on my axios request, but i can not display them on a list on my Nav component, where are my errors ?

The endPoint : https://pokeapi.co/api/v2/pokemon

My code :

App.js

// == Import : npm
import React from 'react';

// == Import : local
import Home from 'src/components/Home';
import Nav from 'src/containers/Nav';
import './app.scss';


// == Composant
const App = results => (
  <div id="app">
    <nav className="nav">
      <Nav props={results} />
    </nav>
    <main className="content">
      <Home />
    </main>
    )}
  </div>
);

// == Export
export default App;

reducer.js

// == Initial State

const initialState = {
  results: [],
  name: '',
  url: '',
};

// == Types
export const FETCH_POKEMON_API = 'FETCH_POKEMON_API';
const RECEIVE_POKEMON_LIST = 'RECEIVE_POKEMON_LIST';

// == Reducer
const reducer = (state = initialState, action = {}) => {
  // console.log('une action arrive dans le reducer', action);
  switch (action.type) {
    case RECEIVE_POKEMON_LIST:
      return {
        ...state,
        results: action.results,
      };

    default:
      return state;
  }
};

// == Action Creators
export const fetchPokemonApi = () => ({
  type: FETCH_POKEMON_API,
});

export const receivePokemonList = results => ({
  type: RECEIVE_POKEMON_LIST,
  results,
});


// == Selectors


// == Export
export default reducer;

Nav Component

import React from 'react';
import PropTypes from 'prop-types';
// import { NavLink } from 'react-router-dom';

// import { getUrl } from 'src/utils';
import './nav.scss';

const Nav = ({ results }) => {
  console.log('if i receive my props from PokeAPI its win guys', results);
  return (
    <div className="menu">
      {results.map(({ Pokemon }) => (
        <li key={Pokemon} className="menu-item">
          {Pokemon}
        </li>
      ))}
    </div>
  );
};

Nav.propTypes = {
  results: PropTypes.arrayOf(
    PropTypes.shape({
      name: PropTypes.string.isRequired,
    }),
  ).isRequired,
};
export default Nav;

Nav Container

// == Import : npm
import { connect } from 'react-redux';

// == Import : local
import Nav from 'src/components/Nav';

// === State (données) ===
const mapStateToProps = state => ({
  results: state.results,
});

// === Actions ===
const mapDispatchToProps = {};

// Container
const NavContainer = connect(
  mapStateToProps,
  mapDispatchToProps,
)(Nav);

// == Export
export default NavContainer;

axiosMiddleware

import axios from 'axios';

import { FETCH_POKEMON_API, receivePokemonList } from 'src/store/reducer';

const ajaxMiddleware = store => next => (action) => {
  console.log('L\'action suivante tente de passer', action);
  switch (action.type) {
    case FETCH_POKEMON_API:
      axios.get('https://pokeapi.co/api/v2/pokemon')
        .then((response) => {
          console.log('response', response);
          console.log('response.data', response.data);
          console.log('response.data.results', response.data.results);

          const { data: results } = response;
     this.setState({
            results: response.data.results,
          });
          store.dispatch(receivePokemonList(results));
        })
        .catch(() => {
          console.log('Une erreur s\'est produite');
        });
      break;

    default:
      // console.log('action pass', action);
      next(action);
  }
};

export default ajaxMiddleware;

whats wrong ?

Thanks you !

Answer 1

I am thinking the code is failing because initially, the results are undefined(Before the call to the API). Also, your Nav component requires that your result object should have a property named name. Have your initial state as follows:

const initialState = {
   results: [{name:""}],
   name: '',
   url: '',
};

Let me know what how it goes

Answer 2

Thanks to @Meshack Mbuvi for his support in private.

• The abscence of thunk is the first problem

• The following code resolved my problem ( thanks to @Mbuvi ) :

      axios.get('https://pokeapi.co/api/v2/pokemon')
        .then((response) => {
          console.log('response.data.results', response.data.results);
          // ici je défni pokemons from api, qui contient la list des pokemons
            // It was like this: const {results} = response.data.results
          const { results } = response.data; // The error was here
          dispatch(receivePokemonList(results));
        })
        .catch((err) => {
          console.log('Une erreur s\'est produite', err);
        });
    };

Answer 3

Using Lodash

  {
      _.map(results, (Pokemon, index) => {
          return (
            <li key={Pokemon} className="menu-item">
                 {Pokemon}
            </li>
          )})
  }

Using Native Map

 {
   results.map((Pokemon, index) => {
   return (
         <li key={Pokemon} className="menu-item">
            {Pokemon}
         </li>
     )})
  }

I think you forgot to return the map component.