Support for optimistic updates

I’m trying to figure out how to implement optimistic updates with createAsyncThunk and I came up with something like this:

export const updateTodo = createAsyncThunk<
  Todo,
  {
    id: Todo["id"];
    changes: Partial<Todo>;
  }
>("todos/update", async (args, { dispatch, getState, requestId }) => {
  const { id, changes } = args;

  const previousTodo = (getState().todos as TodosState).entities[id] as Todo;

  const begin = () => {
    const todo: Todo = {
      ...previousTodo,
      ...changes,
      updatedAt: new Date().toISOString()
    };

    dispatch(updateTodo.fulfilled(todo, requestId, args));
  };

  const commit = () => todosApi.update(id, changes);

  const rollback = () => {
    dispatch(updateTodo.fulfilled(previousTodo, requestId, args));
  };

  begin();

  try {
    return commit();
  } catch (error) {
    rollback();
    throw error;
  }
});

I’d like to share this piece of code because I believe that it could ba a good starting point for something like a generic helper for such actions.

[arctouch-danielbastos]

Thanks for the suggestion! I believe RTK already supports optimistic updates. This is how you could implement the exact same feature without any changes to RTK:

type Todo = {
  id: number;
};

export const updateTodo = createAsyncThunk(
  'updateTodo',
  async (args: {
    todo: Todo;
    changes: Partial<Todo>;
    updatedAt: ReturnType<typeof Date.prototype.toISOString>;
  }) => {
    const { todo, changes } = args;
    todosApi.update(todo.id, changes);
  }
);

const slice = createSlice({
  name: 'todoList',
  // I'm ignoring createEntityAdapter here for simplicity
  initialState: { todos: {} as { [id: number]: Todo } },
  reducers: {},
  extraReducers: reducer =>
    reducer
      .addCase(updateTodo.pending, (state, action) => {
        const { todo, changes } = action.meta.arg;
        state.todos[todo.id] = {
          ...todo,
          ...changes,
        };
      })
      .addCase(updateTodo.rejected, (state, action) => {
        const { todo } = action.meta.arg;
        state.todos[todo.id] = todo;
      }),
});

This has a lot of benefits over the solution you proposed, including:

1. Greater separation of concerns, since no component is responsible for both calling the API (aka dealing with side effects) and creating the Todo.
2. In the same note, Thunks handle side-effects like API calls, while reducers handle business data logic.
3. Code is more declarative. It’s easier to see that “when updateTodo is pending, we do this. When updateTodo is reject, we do that”.

[jordn]

@AndrewCraswell are patches now exposed? I want to apply optimistic UI in the way you’ve suggested but I can see now documentation about it. @arctouch-danielbastos’s comment is very helpful but would lead to more duplicated code in my case