Question

我很擅长做出反应，并且在API调用后调度操作时遇到问题。我目前没有使用任何处理异步操作的中间件。我能够实现登录，注销和注册异步api调用。我试图实现一个获取所有用户的api调用，现在我收到了这个错误。我的getProfile（）函数可以很好地解决任何问题。我的getUsers（）函数抛出错误。

Error: Actions must be plain objects. Use custom middleware for async 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));
  })
}

这是我的减速机

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

这是我的WebApi类

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

Answer 1

你只是忘了回复用户的回复动作。请注意：）

React redux异步操作错误

1 个答案: