Selector/SelectorFamily for partial value setter/getter

[konapaz]

Hi All!

Is there a way to set or get a selector/selectorFamily for an atom to get or set a part of value when its a json ?

This is a detailed question on stackoverflow

https://stackoverflow.com/questions/73366715/react-js-recoil-set-get-on-select-selectfamily-for-specific-attribute

If the answer is no (please explain the reason) what is the best practice ?

Thanks in Advance

The actual question from StackOverflow is:

I use Recoil state management in ReactJS to preserve a keyboard letters data, for example

lettersAtom = atom(
  key: 'Letters'
  default: {
     allowed : ['A','C','D']
     pressedCounter : {'A':2, 'D':5}
  }
)

lettersPressedSelect = selector({
        key: 'LettersPressed',
        get: ({ get }) => get(lettersAtom).pressedCounter, //Not work, returns undefined
        set: () => ({ set }, pressedLetter) => {
            let newState = {...lettersAtom};
            newState.pressedCounter[pressedLetter]++;
            set(lettersAtom, newState);
        }
}),

In functional component i use

const [letters,setLetters] = useRecoilState(lettersAtom);
const [pressedCounter, setPressedCounter] = useRecoilState(lettersPressedSelect);

each time the a keyboard letter pressed the pressedCounter I want to increased for corresponded letter like that

setPressedCounter('A');
setPressedCounter('C'); ///etc...

How to achieve that ? Does recoil have a way to get/set a specific part/sub of json attribute ? (without make another atom? - I want to keep "Single source of truth") Or do you have a suggetion better best practice to do that ?

[drarmstr]

You can update the state based on the existing state in a selector in a couple ways. You could use the get() callback from the setter or you could use the updater form of the setter where you pass a function as the new value which receives the current value as a parameter.

However, it's a good practice to have symmetry for the getter and setters of a selector. For example, here's a selector family which gets and sets the value of a counter:

const lettersPressedState = selectorFamily({
    key: 'LettersPressed',
    get: letter => ({ get }) => get(lettersAtom).pressedCounter[letter],
    set: letter => ({ set }, newPressedValue) => {
        set(lettersAtom, existingLetters => ({
            ...existingLetters,
            pressedCounter: {
                ...existingLetters.pressedCounter,
                [letter]: newPressedValue,
            },
        });
    },
});

But note that the above will set the new value with a new counter value where you originally wanted the setter to increment the value. That's not really setting a new value and is more like an action. For that you don't really need a selector abstraction at all and can just use an updater when setting the atom:

  const [letters, setLetters] = useRecoilState(lettersAtom);
  const incrementCounter = pressedLetter =>
      setLetters(existingLetters => ({
          ...existingLetters,
          pressedCounter: {
              ...existingLetters.pressedCounter,
              [pressedLetter]: (existingLetters.pressedCounter[pressedLetter] ?? 0) + 1,
          },
      });

Note that this uses the updater form of the selector to ensure it is incrementing based on the current value and not a potentially stale value as of the rendering.

Or, you can potentially simplify things more and use simpler values in the atoms by using an atom family for the pressed counter:

const pressedState = atomFamily({
    key: 'LettersPressed',
    default: 0,
});

And you can update in your component like the following:

  const [counter, setCounter] = useRecoilState(pressedState(letter));
  const incrementCounter = setCounter(x => x + 1);

Or create an general incrementor callback:

  const incrementCounter = useRecoilCallback(({ set }) => pressedLetter => {
      set(pressedState(pressedLetter)), x => x + 1 );
  });

Note that the question doesn't actually seem to reference JSON. But, it would also be possible to parse and stringify JSON encodings with a selector abstraction.

[konapaz]

Hi,

a) I would use selectorFamily only if I want to state a specific letter in my component(s), but I want for all the allowed letters so this is not an option in this case

b) I would use the "const [letters, setLetters] = useRecoilState(lettersAtom)" as you mentioned and then a method in my component but I want this action for a lot of component(s) so I avoid to repeat the same code again over and over. So this is the reason that I use selector

c) I would use atom or atomFamily for pressedState but I dont want "scattered" data in diferrent Atoms but alltogether in the same structure, so I use json that group all the "same" type of data like letters, allowedLetters, pressedLetters etc.

Finally, my code needed the "get" method in the set -OR- using previous state callback in the call of "set"

lettersPressedSelect = selector({
        key: 'LettersPressed',
        get: ({ get }) => get(lettersAtom).pressedCounter, //finally work
        set: () => ({ set, get }, pressedLetter) => {
            //way A
            let newState = {...get(lettersAtom)};
            newState.pressedCounter[pressedLetter]++;
            set(lettersAtom, newState);

            //way B (best way)
             set(lettersAtom, prevState => ({
                ...prevState,
                pressedCounter: {
                    ...prevState.pressedCounter,
                    [letter]: prevState.pressedCounter[pressedLetter] + 1
                },
            });
        }
});

In any case thanks for your response