Problem to load series data after fetch api using react/redux-thunk - reactjs

Question

Problem
Hello friends,
I'm developing an app with react + redux, the problem I have is that the series property that comes from
const mapStateToProps = (state) => {
   return {
     series: state.serieReducer
   }
}
It is showing me undefined in console, but if you see the image in the action it loads the 30 data in the array.
I would like if you could help me to solve the problem and be able to load the data in the render(){} function.
src/components/Home/index.js
import React, {Component} from 'react';
import Page from './page.js';
import fetchSeriesAction from '../../redux/actions/series/action.fetch.js';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux'
class Home extends Component {
componentDidMount() {
this.props.fetchSeries();
}
render(){
console.log('TESTING SERIES LIST:', this.props) // show undefined
return(
<Page/>
)
}
}
const mapStateToProps = (state) =>{
return{
series: state.serieReducer
}
}
const mapDispatchToProps = dispatch => bindActionCreators({
fetchSeries: fetchSeriesAction
}, dispatch)
export default connect(mapStateToProps , mapDispatchToProps)(Home);
src/redux/actions/series
serie/action.error.js
import {FETCH_SERIES_ERROR} from '../../types.js';
const fetchSeriesError = (error) =>{
return {
type: FETCH_SERIES_ERROR,
error: error
}
}
export default fetchSeriesError;
series/action.pending.js
import {FETCH_SERIES_PENDING} from '../../types.js';
const fetchSeriesPending = () =>{
return {
type: FETCH_SERIES_PENDING
}
}
export default fetchSeriesPending;
series/action.success.js
import {FETCH_SERIES_SUCCESS} from '../../types.js';
const fetchSeriesSuccess = (series) =>{
return {
type: FETCH_SERIES_SUCCESS,
series: series
}
}
export default fetchSeriesSuccess;
series/action.fetch.js
import fetchSeriesPending from './action.pending.js';
import fetchSeriesSuccess from './action.sucess.js';
import fetchSeriesError from './action.error.js';
const fetchData = () =>{
return async dispatch => {
dispatch(fetchSeriesPending());
await fetch('https://cinemanight.chrismichael.now.sh/api/v1/series/1')
.then(res => res.json())
.then(res => {
if(res.error) {
throw(res.error);
}
dispatch(fetchSeriesSuccess(res.series));
return res.series;
})
.catch(error => {
dispatch(fetchSeriesError(error));
})
}
}
export default fetchData;
reducers/series
series/result.js
import {
FETCH_SERIES_ERROR,
FETCH_SERIES_PENDING,
FETCH_SERIES_SUCCESS
} from '../../types.js';
const defaultState = {
pending: true,
series: [],
error: null
}
const reducer = (state = defaultState, action) =>{
switch(action.type){
case FETCH_SERIES_PENDING:
return{
... state,
pending: true
}
case FETCH_SERIES_SUCCESS:
return{
... state,
pending: false,
series: action.payload
}
case FETCH_SERIES_ERROR:
return{
... state,
pending: false,
error: action.error
}
default:
return state;
}
}
export default reducer;
series/index.js
import resultReducer from './result.js';
export default {
resultReducer
}
store.js
import {createStore , combineReducers , applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import logger from 'redux-logger';
import SeriesReducer from './reducers/series/index.js';
const middlewares = [thunk , logger];
const reducers = combineReducers({
... SeriesReducer
});
const store = createStore(reducers , applyMiddleware(... middlewares));
export default store;

Answer 1

You need to fix either action.success.js or your reducer because in reducer you are setting action.payload and you are sending series from your action.success.js
Either change your action.success.js to:
import {FETCH_SERIES_SUCCESS} from '../../types.js';
const fetchSeriesSuccess = (series) =>{
return {
type: FETCH_SERIES_SUCCESS,
payload: series
}
}
export default fetchSeriesSuccess;
or change your reducer like this:
import {
FETCH_SERIES_ERROR,
FETCH_SERIES_PENDING,
FETCH_SERIES_SUCCESS
} from '../../types.js';
const defaultState = {
pending: true,
series: [],
error: null
}
const reducer = (state = defaultState, action) =>{
switch(action.type){
case FETCH_SERIES_PENDING:
return{
... state,
pending: true
}
case FETCH_SERIES_SUCCESS:
return{
... state,
pending: false,
series: action.series
}
case FETCH_SERIES_ERROR:
return{
... state,
pending: false,
error: action.error
}
default:
return state;
}
}
export default reducer;
update your mapStateToProps method as well:
const mapStateToProps = (state) => {
return {
series: state.resultReducer
}
}