Support creating actions

[snayerman]

So this might be against the philosophy of recoil, but it would be great if we can create a wrapper for a selector/selectorFamily that would allow it to function as an action.

For example, take the following code:

export const modalState = atom<ModalState>({
  key: 'modalState',
  default: { isOpen: true, title: '', ... }
});

export const modalOpenState = selector<boolean>({
  key: 'modalOpenState',
  get: ({ get }) => get(modalState).isOpen,
  set: ({ get, set }, value) => set(modalState, { ...get(modalState), isOpen: value as boolean })
});

Any place I want to set the isOpen property for modalState, I have to do the following:

cosnt setModalOpenState = useSetRecoilState(modalOpenState);

...

const onClick = () => setModalOpenState(true);

It would be nice to have an Action Factory that would allow you do something like this:

// actions.ts
export const openModal = createAction(modalOpenState, true);

// component.tsx
const onClick = () => openModal();

This way, we can simply re-use the action.

You can sort of do something similar, but it's not really the cleanest approach, and requires you to knowingly pass in a value to selectorFamily that will not get used:

export const modalOpenState = selectorFamily<boolean, boolean>({
  key: 'modalOpenState',
  get:
    () =>
    ({ get }) =>
      get(modalState).isOpen,
  set:
    (value) =>
    ({ get, set }, unusedNewValue) =>
      set(modalState, { ...get(modalState), isOpen: value as boolean })
});

export const openModal = modalOpenState(true);


//component.tsx
const setModalOpenState = useSetRecoilState(openModal);

...

const onClick = () => setModalOpenState(unusedNewValue);

EDIT: Some further context...

Say I wanted to have an action called closeModal, that would reset some of the modalState properties. Would be much easier than having to manually pass that data in as an argument. You could create a selector to do this, but since the get is non optional, it seems a bit hacky to consider this as an action

[BenjaBobs]

I believe you can achieve this with useRecoilCallback.

[snayerman]

This still is a very patch-work approach. For starters, we either have to name these psuedo-actions as hooks, so useOpenModal, which is fine I guess, but sounds odd in my opinion. Secondly, it isn't a factory approach - we're forced to create these callbacks as custom hooks if we want to abstract them into their own files.

I appreciate the input, but I still think having an action creator pattern would be very nice

[BenjaBobs]

If you're willing to install 3rd party dependencies, you could go for https://github.com/luisanton-io/recoil-nexus, which would allow you to get/set recoil values outside of the <RecoilRoot>.

[snayerman]

Hmm. That's a step in the right direction, but I am hesitant about using a small library for a production project. Thanks for that link, I'll see if I can create something similar on my own. But my original request stands, I would love an action creator pattern in recoil :)

[drarmstr]

useRecoilTransaction() is a simplified interface for useRecoilCallback() that can be used to create actions. See the reducer example. Though, it doesn't fully support selectors yet.

[snayerman]

This is great, thank you! How would you suggest creating an (both async and sync) action that performs a fetch?

Also, using the useRecoilTransaction approach, I still can't create stand alone actions in a non hook setting :/