2017-02-17 43 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

謝謝,我不能相信我錯過了。 –