Optimistic UI with React and Redux

Ezequiel Zacca
Mar 3 · 4 min read

The classic way

When you learn how to perform async operations using Redux this is how it usually works.

Redux Thunk/Saga classic workflow

The classic async flow with Redux

This is how we would handle an async operation in the typical counter reducer example.

Using Redux Thunk
Using Redux Saga

Optimistic UI

The concept of optimistic UI comes from the UI showing immediate response to a user’s actions as if it knew that the operation will succeed, and, in case of failure, it will revert its state and inform the user that the operation failed.

Facebook Like uses Optimistic UI

Handling failure

One of the required features to implement an Optimistic UI is being able to handle failure on the underlying async operation. The idea is to revert an action dispatched and get the UI to a valid state like if the operation never existed, and at the same time notify the user about the failure (and perhaps give the option to retry).

Optimistic Counter Thunk

Undoing Actions

To be able to undo a specific action instead of having to dispatch an action with the opposite effect, we will use the redux-undo-action package.

Wrapping the top-level reducer using the undoable enhancer
Undoable Action Thunk
Undoable Action Saga

Conclusion

The Optimisitc UI technique provides an improved User Experience that is very noticeable in high latency or low-speed networks and it should be considered for every app, especially in mobile-first websites or mobile apps.
With Redux this UI pattern is very easy and straightforward to implement and will go a long way on improving the engagement of your Users, and the overall feeling of fast responsiveness that we all love feeling when using an App.

Nerd For Tech

From Confusion to Clarification

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store