How to atomize complex structures

[ykadosh]

This is a simpified version of a complex data strcture that I have:

const todos = [
  {done: false, text: '...', tags: [{text: '...'}, {text: '...'}]}
]

To leverage the power of recoil, I have broken down the structure into various atom families, and i'm linking them through unique IDs:

const tag = atomFamily({...});
const todo = atomFamily({...});
const todos = atom({...});

// The state looks something like this:
// todos = ['id1', 'id2'];
// todo('id1') =  {done: false, text: '...', tags: ['id1', 'id2']}
// tag('id1') =  {text: '...'}

But breaking the structure like this adds a lot of complexity to the code. For example, when I add a new todo to the list, I have to iterate over the list of tags and create tag atoms.

Similarly when I remove a todo I have to iterate over all the internal tag atoms and remove them as well.
This gets more complex the deeper the nesting is.

Is there a best practice for atomizing a deeply nested structure like this?

[christiankaseburg]

Recoil supplies us with the building blocks to build whatever data structure we choose. The key part is getting the atom structure correct and handling state operations.

Here is an example of how you can accomplish atomizing this complex data structure.

import { atom, atomFamily } from 'recoil'

type TodoList = string[] 
type Todo = {
   id: string
   done: boolean,
   text: string,
   tagIds: string[]
}
type TagList = string[]
type Tag = {
   id: string
   text: string
}

const todoListAtom = atom<TodoList>({
   key: 'todoList',
   default: []
})

const todoAtomFamily = atomFamily<Todo, string>({
   key: 'todo',
   default: (id) => ({
      id,
      done: false,
      text: '',
      tags: []
   })
})

const tagListAtom = atom<TagList>({
   key: 'tagList',
   default: []
})

const tagAtomFamily = atomFamily<Tag, string>({
   key: 'tag',
   default: (id) => ({
      id,
      text: ''
   })
})

Selectors for deriving state from atoms.

import { selector, selectorFamily } from 'recoil'

const getAllTodosSelector = selector<Todo[]>({
   key: 'allTodos',
   get: ({ get }) => {
      const todoIds = get(todoListAtom)

      const todos = todoIds.map((todoId) => get(todoAtomFamily(todoId)))

      return todos 
   }
})

type TagList = Tag[]
type TodoState = Todo & TagList 

const getTodoState = selectorFamily<TodoState, string>({
   key: 'todoState',
   get: ({ get }) => (todoId) => {
      const todo = get(todoAtomFamily(todoId))
      const tags = todo.tagIds.map((tagId) => get(tagAtomFamily(tagId)))

      return {
         ...todo,
         tags
      }
   }
})

Custom hooks for managing adding and remvoing todo's.

const { useRecoilCallback } from 'recoil'

const useAddTodo = () => {
   const addTodo = useRecoilCallback(({ set }) => (todo: Todo) => {
      set(todoListAtom, (prevTodoListIds) => [...prevTodoListIds, todo.id])
      set(todoAtomFamily(todo.id), todo)
   }, [])

   return addTodo
}

const useRemoveTodo = () => {
   const removeTodoById = useRecoilCallback(({ reset }) => (todoId: string) => {
      set(todoListAtom, (prevTodoListIds) => [...prevTodoListIds, todoId])
      reset(todoAtomFamily(todoId))
   }, [])

   return removeTodoById
}

This may not be the best approach for you, but it is just an example of how you can structure your atoms, derive state from atoms with selectors, and use hooks for adding/removing todos.

The Recoil team will be able to explain this better and correct me on incorrect usages.

[ykadosh]

Thanks for taking the time to reply, @christiankaseburg
This is similar to what I came up with - creating custom hooks for adding/removing/reading atomFamilies.
That's OK if you have a few atom families, but once you have many of those, it can get quite cumbersome to add these utilities per atom family.

So the question is - do I have to sacrifice the readability & maintainability of my code in order to enjoy the performance benefits of recoil? Or is there a better way to do this that I'm not aware of?

[drarmstr]

See also #1164

[ykadosh]

Thanks @drarmstr that makes a lot of sense. That was my conclusion too after trying both ways (simple primitive atoms vs complex atoms). However, it does lead to some code repetition when you need to create, remove, or combine these basic atoms back into a single data structure.

I'm working on a tiny library that makes this process easier by using object references instead of IDs to link between atoms.
I will post it here when it's ready.

[GuacheSuede]

How would one atomize complex structures say 3-4 levels deep ? Would it be possible to have nested atom families of families ? Thanks.

EG.

video = [
    frames = [
         frame = [
             info: {type: '',  date: ''}
             data: ''
         ]
    subtitles: .....etc
    ]
]