Is there any side-effect function comparing with redux 'action'?

[AntiMoron]

As claimed in the doc:

The state definition is incremental and distributed, making code-splitting possible.
-- https://recoiljs.org/docs/introduction/motivation

In a real production project. MVVM should be presented as store & action & view 3 files.

Say, take 'todo list' for example:

// data: store.js
const list = atom({key: 'list', default: [])
export {list}

// action.js
import {list} from './store'
export function updateToDoList(newItem) {
  return getSetter(list)((raw) => raw.concat(newItem)); // <-- I want such thing but didn't find one.
}

// rendering: index.jsx
import {updateToDoList} from './action'

<div onClick={() => {
  updateToDoList({ text: 'Buy a new house', complete: false })
}} >Add item</div>

[AntiMoron]

I've tried such implementation

import {list} from './store'
export function updateToDoList(newItem) {
  const [value, setter] = useRecoilState(list)
  setter([...value, newItem])
}

or

import { useRecoilTransaction_UNSTABLE as transition } from 'recoil';

export const updateToDoList = transition(
  ({ get, set }) =>
    () => {
      const oldTodoList = get(list);
      set(list, [
        ...oldTodoList,
        { text: 'Buy a new house', complete: false },
      ]);
    }
);

but both got this...

Although it's said that

We get a boilerplate-free API where shared state has the same simple get/set interface as React local state (yet can be encapsulated with reducers etc. if needed).

Sadly, such apis are still bound to a react environment with 'hook' name rules.

[duj26089]

marke

[duj26089]

Let's say it follows the React rule

[drarmstr]

For actions, check out the reducer example for useRecoilTransaction_UNSTABLE() or useRecoilCallback().

Note that for full proper support for React concepts such as concurrent mode, transitions, async rendering, etc. the actual Recoil state is coupled with the React rendering context. This is why it is is accessible through hooks when rendering. But, you can still organize and separate your action logic, if desired, just by wrapping it as a hook:

export const useUpdateToDoList = () => useRecoilTransaction_UNSTABLE(
  ({ get, set }) =>
    () => {
      const oldTodoList = get(list);
      set(list, [
        ...oldTodoList,
        { text: 'Buy a new house', complete: false },
      ]);
    }
);

function MyComponent() {
  const updateToDoList = useUpdateToDoList();
  ...
}

Also, for simple updates you can just use the updater form of a setter by passing in a function:

function MyComponent() {
  const setToDoList = useSetRecoilState(listState);
  return (
    <div onClick={() => {
      setToDoList(list => [...list, {text: 'New item', complete: false}]);
    }} >Add item</div>
  );
}

[rpggio]

This would be useful as a docs page about "how to build your actions". After reviewing all the docs, I mistakenly thought useRecoilCallback might be the default choice for non-trivial actions.