2017-02-17 75 views
0

我很新,反应并且在调用API调用后遇到问题。我目前没有使用任何处理异步操作的中间件。我能够实现登录,注销和注册,执行异步API调用。我试图实现一个API获取所有用户,现在我得到这个错误。我的getProfile()函数可以完美解决任何问题。我的getUsers()函数抛出错误。React还原异步操作错误

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

回答

1

你忘记了在usersRecieved行动回报。注意:)

+0

谢谢,我不能相信我错过了。 –