score:3

Accepted answer

Vanilla redux only handles plain object actions such as

{ type: SOME_ACTION, ...parameters }

returned synchronously.

You need to look into using middleware like redux-thunk if you want to return Promises or, really, anything other than a plain object from your action creators (or, in this case, handle asynchronous actions).

see this: How to dispatch a Redux action with a timeout?

edit:

The problem is kind of two fold:

first:

export const getUserDetails = (email) => {
    axios.put('http://localhost:3030/user', user) .then((data) => {
        return {
            type: UPDATE_USER_DETAILS,
            user:data.data
        };
    });
});

you're returning an action inside the promise (axios.put) but you're not returning the promise - javascript doesn't work how you're intending it to work. return, in this case, is limited to the nearest parent scope; in this case the promise body. Just given what you have currently, the return type of the getUserDetails action creator is undefined.

// this is still technically *wrong*, see below
export const getUserDetails = (email) => {
    // notice the return on the next line
    return axios.put('http://localhost:3030/user', user) .then((data) => {
        return {
            type: UPDATE_USER_DETAILS,
            user:data.data
        };
    });
});

returns a Promise<Action> which still doesn't really solve your problem.

second: When working with redux-thunk, you wrap your action in a function like

export const getUserDetails = (email) => {
    return (dispatch) => {
        return axios.put('http://localhost:3030/user', user) .then((data) => {
            // this is where the action is fired
            dispatch({
                type: UPDATE_USER_DETAILS,
                user:data.data
            });

            // if you want to access the result of this API call, you can return here
            // the returned promise will resolve to whatever you return here

            return data; 
        });
    }
});

when you bind the action creator, it will "unwrap" the creator while keeping the method signature - you use it like you would normally

this.props.getUserDetails("email@domain.com").then((data) => {
    // optional resolved promise
})

Related Query

More Query from same tag