Implementing optimistic updates in a Redux app for faster UI response

14 Sep 2023

In a Redux app, it’s important to provide a fast and responsive user interface to enhance the user experience. One way to achieve this is by implementing optimistic updates, where the UI is updated optimistically before the actual API call is made, giving the illusion of immediate response.

Optimistic updates can be useful in scenarios where network requests have a significant delay or are prone to failure. By updating the UI immediately and reverting the changes if the API call fails, the user doesn’t have to wait for the round trip to the server, resulting in a smoother interaction.

Here’s an example of how to implement optimistic updates in a Redux app:

// 1. Set up your Redux store and actions

// Create an action that triggers the optimistic update
const addTodoOptimistic = (text) => {
  return {
    type: 'ADD_TODO_OPTIMISTIC',
    payload: {
      id: Date.now(),
      text,
      completed: false
    }
  };
};

// Create an action that triggers the API call
// (our example assumes you are using Redux Thunk middleware for async actions)
const addTodo = (text) => {
  return (dispatch) => {
    dispatch(addTodoOptimistic(text)); // Dispatch the optimistic update

    // Make the API call
    return fetch('/api/todos', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ text })
      })
      .then(response => response.json())
      .then(json => {
        // Handle the response from the API
        // dispatch additional actions if needed
      })
      .catch(error => {
        // Revert the optimistic update on API failure
        dispatch({ type: 'ADD_TODO_FAILED' });
      });
  };
};

// 2. Modify the reducer to handle the optimistic update

const todosReducer = (state = [], action) => {
  switch(action.type) {
    case 'ADD_TODO_OPTIMISTIC':
      return [...state, action.payload]; // Add the new todo optimistically
    case 'ADD_TODO_FAILED':
      return state.slice(0, -1); // Revert the last optimistic update
    // other cases...
  }
};

// 3. Use the action in your UI components

import React from 'react';
import { connect } from 'react-redux';
import { addTodo } from '../actions';

class TodoForm extends React.Component {
  state = {
    text: ''
  };

  handleChange = (event) => {
    this.setState({ text: event.target.value });
  };

  handleAddTodo = () => {
    const { text } = this.state;
    const { dispatch } = this.props;

    if (text.trim() !== '') {
      dispatch(addTodo(text));
    }

    this.setState({ text: '' });
  };

  render() {
    const { text } = this.state;
    return (
      <div>
        <input
          type="text"
          value={text}
          onChange={this.handleChange}
        />
        <button onClick={this.handleAddTodo}>
          Add Todo
        </button>
      </div>
    );
  }
}

export default connect()(TodoForm);

By implementing optimistic updates in a Redux app, you can provide a smoother and more responsive user interface. However, it’s important to handle potential failures and revert the optimistic updates as needed to maintain data consistency.