2017-02-17 8 views
0

Ich bin ziemlich neu zu reagieren und habe Probleme beim Verteilen von Aktionen nach API-Aufrufe. Ich verwende derzeit keine Middleware, die asynchrone Aktionen verarbeitet. Ich konnte die Anmeldung, Abmeldung und Anmeldung mit Async-API-Anrufen durchführen. Ich habe versucht, einen API-Aufruf zu implementieren, der alle Benutzer bekommt und jetzt bekomme ich diesen Fehler. Meine getProfile() -Funktion funktioniert perfekt ohne Probleme. Meine getUsers() -Funktion wirft den Fehler auf.Reagieren Redux async Aktion Fehler

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

hier meine Handlungen sind

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

hier ist mein Minderer

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

und hier meine WebAPI Klasse ist

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

Antwort

1

Sie haben vergessen, in usersRecieved Aktion nur zurück. Seien Sie aufmerksam :)

+0

Danke, ich kann nicht glauben, dass ich das verpasst habe. –

Verwandte Themen