Search code examples
react-reduxredux-thunk

Redux Thunk action creator not dispatching fetching api


I have created a small react-redux application to fetch api data with redux-thunk middleware, for some reason, the action creator function that returns dispatch is not working.

Action Creators:

export const fetchUsers = () => {
  console.log('test 1');
  return dispatch => {
    console.log('test 2');
    dispatch(fetchUserRequest);
    axios
      .get("https://jsonplaceholder.typicode.com/users")
      .then(response => {
        const users = response.data;
        dispatch(fetchUserSuccess(users));
      })
      .catch(error => {
        const errorMessage = error.message;
        dispatch(fetchUsersFailure(errorMessage));
      });
  };
};

console.log('test 1') is working but console.log('test 2') is not working. Here is codesanbox link


Solution

  • You were missing a a few things: in userTypes you were missing there is no _ when you create const types for example export const FETCH_USER_REQUEST = "FETCH USER REQUEST"; should be export const FETCH_USER_REQUEST = "FETCH_USER_REQUEST"; also in userActions import it from userTypes not userReducers it should be import { FETCH_USER_REQUEST, FETCH_USER_SUCCESS, FETCH_USER_FAILURE } from "./userTypes";

    I have also fixed your userContainer, codesandbax: codesandbax