0

I am pretty new to react and am having problems dispatching actions after API calls. I am not currently using any middleware that handles async actions. I was able to implement login, logout, and signup doing async api calls. I tried to implement an api call that gets all users and now I am getting this error. My getProfile() function is working perfectly with out any problems. My getUsers() function is throwing the error.

Error: Actions must be plain objects. Use custom middleware for async actions.

here are my actions

function profileRecieved(user){
  return {
    type: PROFILE_RECIEVED,
    user
  }
}

function usersRecieved(users){
  type: USERS_RECIEVED,
  users
}

export function getProfile(id){
  WebApi.get('/user/'+id, result => {
    if(result.status !== 200){
      console.log("ERROR");
    } else {
      store.dispatch(profileRecieved(result.data));
    }
  })
}

export function getUsers(){
  WebApi.get('/users', result => {
    store.dispatch(usersRecieved(result.data.users));
  })
}

here is my reducer

const initialState = {
  profileUser:{
    username: "",
    id:"",
    email: ""
  },
  users: []
};

const UserReducer = (state = initialState, action) => {
  switch(action.type) {
    case PROFILE_RECIEVED:
      return Object.assign({}, state, {
        profileUser: action.user
      });
    case USERS_RECIEVED:
      return Object.assign({}, state, {
        users : action.users
      });
    default:
      return state;
  }

and here is my WebApi class

var instance = axios.create({
  baseURL: BASE_URL,
  headers: {
    Authorization: localStorage.getItem("access_token")
  }
});

// All requests made with this class will have
// the Authorization header added to it
class WebApi{

  static get(route, callback){

    instance.get(route)
      .then(response => {
        callback(response);
      })
      .catch(err => {
        console.log(err);
      });
  }

   static post(route, data, callback){
    instance.post(route, data)
    .then(response => {
      callback(response);
    })
    .catch(err => {
      console.log(err);
    });
  }
}

1 Answer 1

1

You just forgot return in usersRecieved action. Be attentive :)

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.