How to dispatch a Redux action with a timeout?

How to dispatch a Redux action with a timeout?

In this post find the quick and simple solution for how to dispatch a Redux action with a timeout? - Quick Fix Series!

Will Mayger

A post by Will Mayger
July 30, 2021

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!

I hope this post has helped, but before you go I highly recommend that you checkout Pluralsight if you are interested in improving your software engineering skills, such as React, JavaScript, or Typescript (and much more).

Not only does Pluralsight provide you with all the learning material you need but it also let's you learn in a fun, interactive way and gives you the ability to see your current progress and level in a certain skill via their Skill Assessment tool which can help you see what you need to learn next to keep improving!

Some graphics used on this post were made using icons from flaticon.