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?