Practical ReactJS and Redux (Optimistic Updates), Part 3

Tips for Optimistic Updates


This is the third in a series of blog posts about real-world ReactJS usage and what we’ve learned scaling our app at Threat Stack. Specifically, this is a quick followup that provides tips on how to achieve optimistic updates and rollbacks with what we’ve worked on in Parts 1 and 2 of this series.

Still making sure to answer these questions:

  • What is the ease of development?
  • How fast can new team members understand what’s going on?
  • How fast can you figure out if something is broken?

This makes use of the CallApiMiddleware shown in Part 1 of this series.

Values passed in the action payload propagate into the reducer.

This can be used for optimistic updates and rollback on errors.

Sure, you could put middleware in place to handle it.

But I think being more declarative here is a bigger win.



export function updateItem ({ item, prevItem }) {
  return {

    callAPI: () => Api.updateItem(item),

    effect ({ dispatch, state, type }) {
      if (type === UPDATE_ITEM_ERROR) {
        // dispatch a notification action which should update
        // state and show a notification somewhere 
        dispatch(showErrNotification('Error updating item'));  

    // prevItem gets passed along with each `type` (request, success, fail)
    payload: {



export default function (state = initialState, action) {
  const { payload } = action;

  switch (action.type) {

    // NOTE: `UPDATE_ITEM_SUCCESS` is not used
    // We'll update the state tree using
    // what was sent to the server by pulling it from `payload`
    case UPDATE_ITEM:
      return {
        item : payload.item,
        err  : null

    // If there was an error, we can revert the state to the previous item
      return {
        item : payload.prevItem, 
        err  : action.err

      return state;


Where We Ended Up . . .

There are libraries and middleware to account for this type of thing.

But I think the real win here comes from using the same building blocks, in this case, payload, to accomplish different things.

It becomes clear to a dev reading the code what’s going on when you’re passing a prop called prevItem along.

P.S. Hack the Planet