Example of Reatom reusable operator, alternative to https://tanstack.com/query/latest/docs/framework/react/guides/optimistic-updates#via-the-ui

example.ts

export const listResource = reatomResource(
  (ctx) => request("api/list", ctx.controller),
  "listResource"
).pipe(withCache(), withDataAtom([]));

export const updateList = reatomAction(async () => {
  /*  */
}, "updateList").pipe(withVariables());

export const List = reatomComponent(({ ctx }) => (
  <ul>
    {ctx.spy(listResource.dataAtom).map((todo) => (
      <li key={todo.id}>{todo.text}</li>
    ))}
    {ctx.spy(updateList.pendingAtom) && (
      <li style={{ opacity: 0.5 }}>{ctx.spy(updateList.variablesAtom)}</li>
    )}
  </ul>
));

withVariables.ts

import {
  AsyncAction,
  atom,
  Atom,
  withAssign,
  withComputed,
} from "@reatom/framework";

export type WithVariables<T extends AsyncAction, State = undefined> = T & {
  variables: Atom<State | Parameters<T>[1]>;
};
export const withVariables = <T extends AsyncAction, State = undefined>(
  initState: State
): ((anAction: T) => WithVariables<T, State>) =>
  withAssign((target, name) => ({
    variablesAtom: atom(initState, `${name}.variablesAtom`).pipe(
      withComputed((ctx, state = initState) => {
        ctx.spy(target).forEach(({ params }) => {
          state = params[0];
        });
        ctx.spy(target.onSettle).forEach(() => {
          state = initState;
        });

        return state;
      })
    ),
  }));