You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The array inside pick() is the path of the nested object to be accessed.
You might also notice that we don't have the import { shallow } from "zustand/shallow" statement in this piece of code. We don't need that. The plugin will automatically add it for us at the time of transpiling.
The plugin detects that order and customer properties are to be accessed from the store[sessionId].globals property from useGlobalStore and it generates code for it.
It will also add optional chaining (store[sessionId]?.globals) for all the nested properties automatically to make the picks free from null-pointer errors.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
This is how we pick some properties from a nested Zustand store:
This involves a lot of boilerplate code just to access two properties from a store containing nested values.
We have built a transformer capable of generating the boilerplate at the time of transpiling (during bundling): https://www.npmjs.com/package/@bigbinary/babel-preset-neeto.
If this plugin is added to your babel configuration, you can rewrite the previous example as:
The array inside
pick()
is the path of the nested object to be accessed.You might also notice that we don't have the
import { shallow } from "zustand/shallow"
statement in this piece of code. We don't need that. The plugin will automatically add it for us at the time of transpiling.The plugin detects that
order
andcustomer
properties are to be accessed from thestore[sessionId].globals
property fromuseGlobalStore
and it generates code for it.It will also add optional chaining (
store[sessionId]?.globals
) for all the nested properties automatically to make the picks free from null-pointer errors.You can read more about it here: https://github.com/bigbinary/babel-preset-neeto/blob/main/docs/zustand-pick.md
Beta Was this translation helpful? Give feedback.
All reactions