Zedux-like selectors

[IanDuncanson]

Our application uses a quasi-normalized store to edit a tree structure, similar to below:

{
    "components": [
        {
            "id": "root",
            "type": "group",
            "children": [
                "1", "2", "3"
            ]
        },
        {
            "id":  "1",
            "type": "label",
            "properties": {
                "text": "This is a child of the root"
            }
        },
        {
            "id":  "2",
            "type": "rect",
            "properties": {
                "color": "blue"
            }
        },
        {
            "id":  "3",
            "type": "group",
            "children": [
                "4"
            ]
        },
        {
            "id":  "4",
            "type": "label",
            "properties": {
                "text": "This is a child of another child"
            }
        }
    ]
}

We don't like passing atoms into react components as props, so we like the zedux concept of selectors, and in particular, selectors that take parameters (in our case, the parameter passed to the selector would normally be the component id).

In Zedux, this looks like the following - useAtomSelector, in particular the example

useAtomSelector(getUserById, id)

In our case, we would have selectors such as getChildrenById to get the child ids of a certain parent and getPropertiesById to get the properties of a certain component based on its id.

Note that in both these cases, the "thing" returned is itself editable - so the process of adding a new component involves adding the component with a new unique id to the main list, and adding a new element to its parents "children" array. Similarly, deleting a component involves removing it from the main list and removing the id of that deleted element from its parents "children" array.

I can't seem to work out how to structure jotai to achieve the same or similar to Zedux's parameterized selector and useAtomSelector.

Any help would be greatly appreciated.

[dai-shi]

We used to have useSelector, but selectAtom is more capable, so unified.
However, selectAtom isn't recommended except for escape hatches, and what's recommended is derived atoms.

Here's what I would do:

const useAtomSelector = (selector, param) => useAtomValue(
  useMemo(() => atom((get) => selector(get, param)), [selector, param])
)

[IanDuncanson]

Thanks @dai-shi, I will give this pattern a try and let you know how it goes. Just to complete the picture, is there a way to use the selector outside of a hook as well - again, trying to get something similar to Zedux, where they use injectAtomSelector to use that same selector outside the scope of a react hook.

[dai-shi]

Jotai atoms can only read other atoms and nothing else.

What you can do it to create a factory function.

const createAtomWithSelector = (selector, param) => atom((get) => selector(get, param))

Or, with atomFamily:

const myFamily = atomFamily((param) => atom((get) => mySelector(get, param)))

[IanDuncanson]

Got it (I think)! So the hook version you specified above in your first response (useAtomSelector) is just that selector factory version wrapped in useMemo to make the selector stable?