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);
});
}
}