This article is a complete insights on how to dispatch a Redux action with a timeout in React. Read the article for more insights on Redux.

2. How To Dispatch A Redux Action With A Timeout?
Do you want to dispatch a redux action with a timeout? If yes, then this
onsite blog can give you a better chance to make it possible. Generally,
you should never get into the trap of thinking that a library can
prescribe you everything.
If you are new into this topic, don’t worry! we have uploaded
a beginner’s friendly guide on redux. Check this out.
When you want to do something with the JavaScript timeout, then sure
you have to use setTimeout. Here there is no special reason why redux
actions are different from others. When you want to dispatch a redux
action with a timeout, you can get help from React professionals and
acquire React js development services for your projects.

3. • Redux can provide the most effective alternative ways to deal with
the asynchronous stuff. But you have to use them after realising that
you are repeating the code too much. When you are facing this
problem, then you have to use what your entire language offers.
Finally, you can get the simplest solution.
• See the code Snippet below:

4. Writing Async Code Inline:
It is the simplest process and there is nothing specific to the redux here
store.dispatch({ type: 'SHOW_NOTIFICATION', text: 'You logged in.' })
setTimeout(() => {
store.dispatch({ type: 'HIDE_NOTIFICATION' })
}, 5000)
Similarly, from around the connected component:
this.props.dispatch({ type: 'SHOW_NOTIFICATION', text: 'You logged in.' })
setTimeout(() => {
this.props.dispatch({ type: 'HIDE_NOTIFICATION' })
}, 5000)

5. • The major difference is that, here in this connected component, you
don’t need to access the store itself. But either you can get dispatch()
or particular action creators that are injected as props. You will never
get any difference from here.
• When you don’t like making types while dispatching the same actions
from various components, then you have to extract the action
creators. Instead, you can dispatch the action objects to inline
effectively:

6. // actions.js
export function showNotification(text) {
return { type: 'SHOW_NOTIFICATION', text }
}
export function hideNotification() {
return { type: 'HIDE_NOTIFICATION' }
}
// component.js
import { showNotification, hideNotification } from '../actions'
this.props.dispatch(showNotification('You just logged in.'))
setTimeout(() => {
this.props.dispatch(hideNotification())
}, 5000)

7. • Or, in case you have bound them previously with connect():
this.props.showNotification('You just logged in.')
setTimeout(() => {
this.props.hideNotification()
}, 5000)
Till now there is no middleware or other advanced concept that has
been used.

8. Extraction of Async Action Creator:
• Even the above-mentioned approach is very simple, but you may face some
serious problems:
• It may force you to duplicate the logic anywhere you want for showing the
notification.
Such notifications will never have any IDs. Therefore there you will have the
race condition when you show two essential notifications very fast. If the
first time out is completed, then it will dispatch the HIDE_NOTIFICATION.
Along with that, it will hide the second notification very fast after the
timeout.
For solving these problems, you have to extract the function that integrates
the timeout logic and dispatch major actions. It may look like this:

9. // actions.js
functionshowNotification(id, text) {
return { type: 'SHOW_NOTIFICATION', id, text }
}
functionhideNotification(id) {
return { type: 'HIDE_NOTIFICATION', id }
}
letnextNotificationId = 0
export function showNotificationWithTimeout(dispatch, text) {
// Assigning IDs to notifications lets reducer ignore HIDE_NOTIFICATION
// for the notification that is not currently visible.
// Alternatively, we could store the timeout ID and call
// clearTimeout(), but we’d still want to do it in a single place.
const id = nextNotificationId++
dispatch(showNotification(id, text))
setTimeout(() => {
dispatch(hideNotification(id))
}, 5000)
}

10. • During this time, components make use of
showNotificationWithTimeout without duplicating any logic or having
race conditions with various notifications:
// component.js
showNotificationWithTimeout(this.props.dispatch, 'You just logged in.')
// otherComponent.js
showNotificationWithTimeout(this.props.dispatch, 'You just logged out.')
Now showNotificationWithTimeout() needs to accept the dispatch as
the first argument. It is mainly since; it must have to dispatch the
actions to the store. A component is able to access dispatch but an
external function is needed to take complete control over dispatching.
Finally, it is best to give control over the dispatching.
When you are having the singleton store exported from a certain
module, then instead you have to import it and then directly dispatch:

11. // store.js
export default createStore(reducer)
// actions.js
import store from './store'
// ...
letnextNotificationId = 0
export function showNotificationWithTimeout(text) {
const id = nextNotificationId++
store.dispatch(showNotification(id, text))
setTimeout(() => {
store.dispatch(hideNotification(id))
}, 5000)
}
// component.js
showNotificationWithTimeout('You just logged in.')
// otherComponent.js
showNotificationWithTimeout('You just logged out.')

12. • It will force the store to be the singleton. It can become very hard to
implement the server rendering.
• You must need each request to access its own store on the server.
• Therefore different users can get different preloaded data. Here a
singleton store can make the testing process very hard. You were
never able to mock the store anymore while testing the action
creators. It is because; they refer to a certain real store that is
exported from a certain module. You could never reset that state
from outside.
• Therefore when you technically are able to export the singleton store
from the module, then experts strictly oppose it. You should never do
it unless you ensure that your app won’t add any server rendering.

13. Now you have to get back to the previous version:
<// actions.js
// ...
letnextNotificationId = 0
export function showNotificationWithTimeout(dispatch, text) {
const id = nextNotificationId++
dispatch(showNotification(id, text))
setTimeout(() => {
dispatch(hideNotification(id))
}, 5000)
}
// component.js
showNotificationWithTimeout(this.props.dispatch, 'You just logged in.')
// otherComponent.js
showNotificationWithTimeout(this.props.dispatch, 'You just logged out.')

14. • It can solve certain problems with logic duplication and save a lot
from race conditions.
Thunk middleware:
The approach should be sufficient for simple apps. When you are
happy, then don’t worry about the middleware. You may get
certain inconveniences in larger apps.
Redux thunk can teach redux to explore special actions.

15. import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
const store = createStore(
reducer,
applyMiddleware(thunk)
)
// It still recognizes plain object actions
store.dispatch({ type: 'INCREMENT' })
// But with thunk middleware, it also recognizes functions
store.dispatch(function (dispatch) {
// ... which themselves may dispatch many times
dispatch({ type: 'INCREMENT' })
dispatch({ type: 'INCREMENT' })
dispatch({ type: 'INCREMENT' })
setTimeout(() => {
// ... even asynchronously!
dispatch({ type: 'DECREMENT' })
}, 1000)
})

16. Conclusion:
• From the above-mentioned scenario, now you have found out the
procedure to dispatch a redux action with a timeout. Therefore hire
react js development services to dispatch a redux action with a
timeout. Get help from a group of professional experts.
• Stuck in your development problems or need professionals to resolve
your problems? Hire Mobile App Development Agency for software
development solutions.
• Content Source: https://bosctechlabs.com/dispatch-a-redux-action-
with-timeout/