Calling another action after one is completed in React

I'm using Redux Thunk.

I got an async operation (updating message to db), and I want to wait for it to complete and then get the updated messages array from the db.

I tried:

const handleWriteMessage = async (e) => {
e.preventDefault()

await dispatch(
  writeMessage({
    sender: data.sender,
    subject: data.subject,
    receiver: data.receiver,
    message: data.message,
    created: date
  })
)
dispatch(getMessages())
}

But it doesn't mind the await and runs getMessages() immediately when handleWriteMessage is called. I tried to do it in the action itself after it's completed:

axios
.post('http://localhost:4000/api/messages/writeMessage', msg, config)
.then((res) => {
  getMessages()
  dispatch({
    type: WRITE_MESSAGE_SUCCESS
  })
})

But it's not working too.

What am I missing?

from Recent Questions - Stack Overflow https://ift.tt/3i7eNF5
https://ift.tt/eA8V8J