Can't destructure data from axios post request response

Question

So I'm making a simple CRUD app trying to familiarize myself with redux. Basically I'm transferring data from a form and sending a post request to the server to create a new blog post (more or less). Here's the code for the onSubmit:

const handleSubmit = (e) => {
        e.preventDefault()
        dispatch(createPost(postData));
    }

Here's the action being dispatched and where the error is coming from (src/actions/posts.js):

export const createPost = (post) => async (dispatch) => {
    try 
    {
        const { data } = await api.createPost(post);
        dispatch({ type: "CREATE", payload: data});
    } 
    catch (error) 
    {
        console.log(error.message);
    }
}

This function isn't able to destructure data from the api's response, because the response is undefined. Here's the code that sends the request from src/api/index.js:

export const createPost = (newPost) => {
   axios.post(url, newPost);
}

When I console.log the response from this function using.then(), it returns a 201 along with exactly what one would expect from a successful request. So the response returns 201 and the entry gets added to the DB but my action function cannot destructure the data from the response because it's undefined. What is my stupid mistake?

Answer 1

You aren't returning a value from the function. Try

export const createPost = (newPost) => {
    return axios.post(url, newPost);
}