Error using SetTimeOut with React/redux dispatch function

Question

So I have this state for handling error messages and that state have two actions

The first one for setting the message:

export const setNotification = (message) => {
return {
    type: "SET_NOTIFICATION",
    data: {
        message,
        visibility: "visible"
    }
}

}

And the second for removing the message after 5 seconds:

export const clearNotification = (seconds=5) => {
setTimeout(()=>  { return {
    type: "REMOVE_NOTIFICATION",
    data: {
        message: "",
        visibility: "hidden"
    }
}}, seconds * 1000)

}

And when calling the second function called ClearNotification I get this error:

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

Why am I getting this message and how can I fix it?

Thanks.

Answer 1

That's because you can not return a function as action. The actions are simple objects of the shape ´{type: string, ...any}´. If you want to return a function you should google for redux-thunk or something like redux-saga or redux-observable but those are quite tricky.

This link has an example of what you want to do. https://github.com/reduxjs/redux-thunk#motivation