TypeError: undefined is not an object (evaluating 'state.postcomics.postscomics') - react-native

Question

I'm starting on React-Native, (and sorry for my English too).
After several researches, I cannot find the solution of this problem.
And I can't really understand this problem.
import { connect } from 'react-redux';
import ListComics from '../components/ListComics';
import { fetchPostscomics } from "../action/comics";
const mapStateToProps = state => {
return {
comics: state.postcomics.postscomics,
//loading: state.postcomics.loading
};
};
const mapDispatchToProps = dispatch => {
return {
fetchPostscomics: () => dispatch(fetchPostscomics()),
};
};
export default connect(mapStateToProps, mapDispatchToProps)(ListComics);
reducer:
``
import {
FETCH_POSTSCOMICS_REQUEST,
FETCH_POSTSCOMICS_SUCCESS,
FETCH_POSTSCOMICS_FAILURE
} from '../action/comics';
import {
ADD_POSTCOMICS_REQUEST,
ADD_POSTCOMICS_SUCCESS,
ADD_POSTCOMICS_FAILURE,
} from '../action/addComics';
const initialState = {
comics: []
};
function postcomics(state = initialState, action) {
switch(action.type) {
case FETCH_POSTSCOMICS_REQUEST:
return { ...state, loading: true };
case ADD_POSTCOMICS_REQUEST:
return { ...state, loading: true };
case FETCH_POSTSCOMICS_SUCCESS:
return {
...state,
comics: action.payload,
loading: false
};
case ADD_POSTCOMICS_SUCCESS:
return { comics: [...state.postscomics, action.payload]};
case FETCH_POSTSCOMICS_FAILURE:
return { ...state, error: action.payload, loading: false };
case ADD_POSTCOMICS_FAILURE:
return { ...state, error: action.payload, loading: false };
default:
return state;
}
}
const store = combineReducers({postcomics});
export default createStore(store, applyMiddleware(thunk));
``
`Code FectchPostscomics:
export const FETCH_POSTSCOMICS_REQUEST = 'FETCH_POSTSCOMICS_REQUEST';
export const FETCH_POSTSCOMICS_SUCCESS = 'FETCH_POSTSCOMICS_SUCCESS';
export const FETCH_POSTSCOMICS_FAILURE = 'FETCH_POSTSCOMICS_FAILURE';
export function fetchPostscomics() {
return function (dispatch) {
dispatch(fetchPostscomicsRequest());
console.log(process.env.API_URL);
return fetch('http://192.168.1.23:4000/comics')
.then(
response => response.json(),
error => dispatch(fetchPostscomicsFailure(error))
)
.then(postscomics => {
dispatch(fetchPostscomicsSuccess(postscomics));
});
}
}
export function fetchPostscomicsRequest() {
return {type: FETCH_POSTSCOMICS_REQUEST};
}
export function fetchPostscomicsSuccess(posts) {
return {type: FETCH_POSTSCOMICS_SUCCESS, payload: { comics: postscomics} };
}
export function fetchPostscomicsFailure(error) {
return {type: FETCH_POSTSCOMICS_FAILURE, payload: error};
}

Answer 1

Youy action.payload is an object ... and you need to pass only comics to your state ... not the whole object
case FETCH_POSTSCOMICS_SUCCESS:
return {
...state,
...action.payload,
loading: false
};
OR
case FETCH_POSTSCOMICS_SUCCESS:
return {
...state,
comics: action.payload.comics,
loading: false
};
And regarding accessing your comics state:
const mapStateToProps = state => {
return {
comics: state.postcomics.comics // <-- Look at this
};
};
Same thing for other actions like ADD_POSTCOMICS