How to dispatch a Redux action with a timeout?

In this quick post we will be covering how to dispatch a Redux action with a timeout so you can solve this issue quickly and without having to look any further!

As with all my Quick Fix Series of posts, you will first find the problem described and then the solution just below.

Let’s get stuck in!

The Problem - Why should we dispatch a Redux action with a timeout?

The problem here is what do you do if you want to dispatch an action with a delay or a timeout?

You might have an action that gets dispatched via a user event, such as a click and then you need to trigger another action after a set period of time, perhaps a notification, some kind of transition or maybe closing a reminder.

const handleClick = dispatch => {
  dispatch({ type: SHOW_REMINDER, payload: "This is your reminder!" })
  // The problem here is how do we now dispatch a second action in a few seconds to hide the reminder.
}

The Solution - How to dispatch a Redux action with a timeout?

The solution to how to dispatch a Redux action with a timeout is to set a new timeout after we dispatch the first action.

We don’t need to rely on redux to do this for us and in fact adding logic like this into a redux store will potentially cause issues and be difficult to work with.

So for the first solution, we need to simply add in a second dispatch that is wrapped in a setTimeout function with a delay in milliseconds.

const handleClick = dispatch => {
  dispatch({ type: SHOW_REMINDER, payload: "This is your reminder!" })
  setTimeout(() => dispatch({ type: HIDE_REMINDER }), 5000)
}

An alternative solution is to make use of a middleware like redux saga.

Using this middleware you can once again make use of the setTimeout to cause a delay so you can then fire your second action later on like so:

const wait = ms => new Promise(resolve => setTimeout(resolve, ms))

function* exampleSaga() {
  yield put({ type: SHOW_REMINDER, payload: "This is your reminder!" })
  yield call(wait, 5000)
  yield put({ type: HIDE_REMINDER })
}

In this example we first dispatch the action to show the reminder using the put function, after that we use the call function to wait for some async code to resolve (in our case the wait function we created) and then lastly we dispatch our final action which hides the reminder.

Summary

There we have the quick fix to how to dispatch a Redux action with a timeout. If you want more like this be sure to check out some of my other posts!