Working with nested state
TLDR: Before xoid:
setState((state) => {
...state,
deeply: {
...state.deeply,
nested: {
...state.deeply.nested,
value: state.deeply.nested.value + 1
}
}
})
after xoid:
atom.focus(s => s.deeply.nested.value).update(s => s + 1)
xoid makes it easier to work with nested state. Redux and React (and xoid) are based on immutable updates. Immutability is great, however it usually has a bad impact on code readability.
To overcome this, there are other tools like immutablejs or immer. Even Redux Toolkit comes with immer by default. Note that using Redux toolkit means adding another ~11kB to your bundle size. This number is ~5kB for immer alone. xoid is ~1kB, yet it can be used to overcome the same problem.
Related
To see how xoid compares to a classical reducer, and a dedicated library that's using immer internally (use-methods), you can check the following example:
