Question: best way to handle normalised arrays

[ayroblu]

Hi! I was wondering if you had any recommendations for handling normalised array state?
For example

type Todo = {
  id: string,
  text: string,
  done: boolean,
}

export const todoIdsState = atom<string[]>({
  key: "todoIdsState",
  default: [],
});
export const todosState = atomFamily<Todo, string>({
  key: "todosState",
  default: (id) => ({ id, text: "", done: "" }),
});

I was thinking that I can synchronise changes with selectors, e.g. an insert selector which handles inserting at an index.

export const todosInsertSelector = selectorFamily<Todo, number | undefined>({
  key: "todosInsertSelector",
  set: (index) => ({ get, set }, newTodo) => {
    if (newTodo instanceof DefaultValue) {
      // Not relevant for inserts
      return;
    }
    const todosIds = get(todoIdsState);
    if (nonNullable(index)) {
      set(todoIdsState, todoIds.concat().splice(index, 0, newTodo));
    } else {
      set(todoIdsState, todoIds.concat(newTodo));
    }
    set(todosState(newTodo.id), newTodo);
  },
})

It's not particularly elegant, but just hoping to get some guidance on best practices

[douglasg14b]

Also quite interested in this, as the solutions seem rather inelegant, and not straight forward.

Since you asked this ~4 months ago, have you figured out anything more here?

Is there more to your atomFamily than just:

export const todosState = atomFamily<Todo, string>({
  key: "todosState",
  default: (id) => ({ id, text: "", done: "" }),
});

[ayroblu]

I did not bother with normalisation, there's too much risk of tech inertia (my personal term for tech debt) at this stage without proper guidance, so it's just an array right now: https://github.com/ayroblu/collab-notes/blob/6c3c4b2f9f5734010503ba900993db93273b9b74/src/components/data-model/index.ts#L109
It's a minor thing, so if the perf is required, I can do it at a later stage

[drarmstr]

Note you can also use useRecoilCallback() for updater actions / reducers without needing a write-only selector for more thorough async support.

[ayroblu]

Hey, I'm not sure how useRecoilCallback results in less code than the write only selector? imo they look equivalent, but maybe you have a better understanding than me. Also I thought selectors had good async support already?

[drarmstr]

They would be similar. Introducing a selector for only writing adds some unnecessary incremental cost for updating data flow graph. It also introduces a risk of what happens if you tried to actually read it without providing a placeholder value. Selectors have good support for reading async, but writable selectors have a limitation that they can't read from async dependencies during the set() callback. useRecoilCallback() provides a getPromise() or getLoadable() callback which can handle async reads during a write.