Call API with React Redux, Axios - reactjs

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

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 2

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 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.