const fetchUsersRequest = () => {
return {
type: FETCH_USERS_REQUEST,
info: {
loading: true
}
};
};
const fetchUsersSuccess = (data) => {
return {
type: FETCH_USERS_SUCCESS,
info: {
loading: false,
users: data,
error: null
}
};
};
const fetchUsersError = (error) => {
return {
type: FETCH_USERS_ERROR,
info: {
loading: false,
users: null,
error: error
}
};
};
const fetchData = () => {
return (dispatch) => {
dispatch(fetchUsersRequest());
axios
.get("https://jsonplaceholder.typicode.com/users")
.then((res) => {
dispatch(fetchUsersSuccess(res.data));
})
.catch((err) => {
dispatch(fetchUsersError(err));
});
};
};
const requestReducer = (response = {}, action) => {
if (
action.type === FETCH_USERS_REQUEST ||
action.type === FETCH_USERS_SUCCESS ||
action.type === FETCH_USERS_ERROR
) {
response = { ...action.info };
return response;
}
return response;
};
const store = createStore(requestReducer, applyMiddleware(thunk, logger));
store.dispatch(fetchData());
The calls to dispatch in axios.then() and axios.catch() never get executed. Even though I am getting the data in the response and the same data gets console logged but the actions are not getting dispatched. The state always has {loading:true} and the result from api call is not updating the state.