Is there a way to create actions that update multiple maps/atoms?

[marcebdev]

It seems with an atomic state structures there's often state that makes sense to have separately as it's generally mutated independently but you may want to come up with use cases that touches multiple maps or atoms.

Is it possible to update multiple atoms/maps from one action (I don't think it is)? Otherwise, what would be the best way to do it? Create a helper function that wraps multiple actions (one per each atom/map)?

[ai]

React has re-render bunching. If you update 10 atoms in one callback, only one re-render will be called.

Svelte has bunching as well.

DO you have any another reasons to be worry about multiple changes in the atoms?

[marcebdev]

Not at all, I was more so just curious if there was an advisable pattern for this in particular. Based on your response, I'd imagine just calling multiple actions (could be wrapped into a helper function) would be a perfectly reasonable & clean approach?

[ai]

In depends on how many changes do you see in the DevTool log.

action is just a syntax sugar for logging.

For instance, if I need to rename 5 users, I prefer to call 5 different renameUser() actions. But if I have removeAllPosts() I prefer to remove all posts in a single action.

[marcebdev]

Got it that makes sense, unless I come into a more complicated use case I think that clarifies my thoughts for now. I'll certainly follow up if I run into anything interesting.

Thank you so much for the awesome library & the insight!

[marcebdev]

So since I've come up with one simple example that comes back to the original point. This is a simplified example of a real use-case though I'm not sure the specific use case is important. This does occur in global state where we have to mutate multiple stores at once in Flux patterns, it's certainly would be more common in an atomic state pattern.

let's say I have 2 loading atoms

export const isObjectLoading = atom<boolean>(false)
export const isPropertyLoading = atom<boolean>(false)

When the property is loading well we also want to lock the object in a loading state. isObjectLoading also has its own use case when the whole object is going into a loading state (full object is being replaced, deleted, etc.)

In such a case whenever the isPropertyLoading flag is set we ALWAYS want to also set isObjectLoading this would be a good use case to have an action that can impact multiple stores (atoms or maps)

setIsPropertyLoading = action([isObjectLoading, isPropertyLoading], 'setIsPropertyLoading', ([objectStore, propertyStore] => {
  objectStore.set(true)
  propertyStore.set(true)
})

However, actions do not support this currently as far as I know.

Instead what we can to is create our own wrapping func

const setIsPropertyLoading = (newVal: boolean) => {
  objectStore.set(true)
  propertyStore.set(true)
}

Obviously you could define 2 separate actions and call them in this wrapping func, but consequently we lose out on 2 benefits

1. it's redundant, unless there's a reason to have multiple actions
2. the logging is more cumbersome, instead of having a clean human-readable history of actions taken on a store(s) we will see 2 actions logged back-to-back and it would be up to the user to mentally deduce where this change actually was called

Maybe this is by design, and makes the most sense (they are different stores after all) but it seems like something worth thinking about or getting clarity on how to handle "compound actions" if you will.

Clearly one solution could be to make this a map but I think that would be overkill, and ultimately defeat part of the purpose of an atom based state pattern if the solution to many problems becomes to "use a map." In reality these 2 atoms are independent, they affect different UI elements, but do have some relationship which would seem fairly common for an atom based pattern.

[ai]

BTW, for my cases I am using this way since action() is just a syntax sugar.

const setIsPropertyLoading = (newVal: boolean) => {
  objectStore.set(true)
  propertyStore.set(true)
}