The HTTP request works as expected but I see an additional request to /%3Canonymous%3E that returns 404. This is causing the following error in Redux: TypeError: Cannot read property 'map' of undefined my reducer looks like this
export const getPostsReducer = (state={posts:[]}, action)=>{
switch(action.type){
case POST_UPLOAD_START:
return{
isLoading:true,
posts:[],
};
case POST_UPLOAD_SUCCESS:
return{
isLoading:false,
posts:action.payload.posts,
pages: action.payload.pages,
page:action.payload.page
};
case POST_UPLOAD_FAILURE:
return{
isLoading:false,
error:action.payload
};
default:
return state
}
}
my actions file
export const listPosts = (keyword = '', pageNumber='') => async(dispatch)=>{
try{
dispatch({type: POST_UPLOAD_START})
const {data} = await axios.get(`/api/posts?keyword=${keyword}&pageNumber=${pageNumber}`)
console.log(data)
dispatch({
type:POST_UPLOAD_SUCCESS,
payload:data
})
}catch(error){
dispatch({
type:POST_UPLOAD_FAILURE,
payload:error
})
}
}
in this is where i call my actions, in my home screen
export default function Home({ match }) {
const keyword = match.params.keyword
const pageNumber = match.params.pageNumber || 1
const dispatch = useDispatch()
const allPosts = useSelector(state => state.allPosts)
const {
isLoading,
error,
posts,
page,
pages
} = allPosts
useEffect(() => {
dispatch(listPosts(keyword, pageNumber))
}, [dispatch, keyword, pageNumber])
}
this is what morgan returns
