Less verbose selectors?

[m-bp]

So the documentation suggests we do this:

const { nuts, honey } = useStore(state => ({ nuts: state.nuts, honey: state.honey }), shallow)

And I guess a slightly shorter version would be:

const { nuts, honey } = useStore(({ nuts, honey }) => ({ nuts, honey }), shallow)

But is there any other way to do this that doesn't require writing the same property name 3 times? I want to move away from Context and put some setter functions here but I feel like there should be a better way. If I have 4-5 setters and each component takes a different combination of them I end up having to write a bunch of code only to get the functions into my component.

[dai-shi]

Hi, this is an interesting discussion. Hope someone will jump in.

If I were to write such an example, I would do:

const nuts = useStore(state => state.nuts)
const honey = useStore(state => state.honey)

Or, I'd use valtio instead.

[drcmda]

i usually group stuff in the state model. if i know that props belong together and wont cause perf issues i just go

const { nuts, honey } = useStore(state => state.food)

[m-bp]

const { nuts, honey } = useStore(null, shallow)
const { nuts, honey } = useStore(s => s, shallow)

Ideally this would work

[dai-shi]

Well,,, that's why we developed valtio.

import { useSnapshot } from 'valtio'

  const { some: { nuts }, thing: { honey } } = useSnapshot(state)

[m-bp]

Well,,, that's why we developed valtio.

import { useSnapshot } from 'valtio'

  const { some: { nuts }, thing: { honey } } = useSnapshot(state)

Main issue with Valtio is SSR support. I got it working based on some old discussion but can I trust it? My site uses Next.js.

[dai-shi]

As far as I understand, SSR is sort of an issue for all module states. zustand and valtio are in the same situation.

Anyway, if you already know valtio. No reason to push.
Just a last option: zustand + react-tracked

[drcmda]

const { nuts, honey } = useStore(null, shallow)
const { nuts, honey } = useStore(s => s, shallow)

Ideally this would work

That works, it's just useStore()

[TheTisiboth]

I came up with this solution:

// Utility function, to allow us to pick fields from the store
const useMulti = <T extends object, K extends keyof T>(
  useStoreFn: UseBoundStore<StoreApi<T>>,
  ...items: K[]
): Pick<T, K> => {
  return items.reduce(
    (carry, item) => ({
      ...carry,
      // No need to use useShallow here, as we fetch the objects one by one
      [item]: useStoreFn((state) => state[item]),
    }),
    {}
  ) as Pick<T, K>;
}

// Wrapper store hook
const useStoreMulti = (...items: Array<keyof StoreType>) =>
  useMulti(useStore, ...items)

Thanks to those functions, you can then simply access your store like this:

const {nuts,honey} = useStoreMulti("nuts","honey")

Note that it is Typescript compliant, so those strings are type safe.

I have a running example there:
https://codesandbox.io/p/sandbox/contexts-x8w2jj?file=%2FREADME.txt%3A36%2C208

[dbritto-dev]

@TheTisiboth have you read this https://docs.pmnd.rs/zustand/guides/auto-generating-selectors#create-the-following-function:-createselectors

[TheTisiboth]

Ah that is basically what I was looking for, amazing! That's perfect :)
Honestly I googled for some time, and couldn't land on that page for some reason (and I think that I am not the only one?)

[TheTisiboth]

@dbritto-dev Actually it doesn't exactly achieve what I am looking for. Ultimately, I would like to be able to do smth like this:
const { bears, increaseBear } = useStore.use;
Sadly with your solution it doesn't work, since bears returns a function, so I would need to call bears() to access it's value, right?
Whereas with my method, I could do smth like:
const {bears,increment} = useStoreMulti("bears","increment")
It's all in one line.
But maybe you have thought about it, or have a workaround to make this createSelectors work in one line?

[dbritto-dev]

@TheTisiboth gotcha but what you are looking is almost the same a const { bears, increment } = useStore(s => ({ bears: s.bears, increment: s.increment })) I don't see any benefits on your solution

[dbritto-dev]

You can create a factory selector in order make it less verbose but I don't know doesn't feel like you are winning something with that and would less readable

[Mike-Bell]

For what it's worth, I also feel this issue. As a somewhat concrete example, it's pretty easy to accidentally do something like this, especially when you have a lot of picks going on all over the place:

const boolA = useStore(s => s.boolA);
const boolB = useStore(s => s.boolA); // BUG!!!
const boolC = useStore(s => s.boolC);

Whereas this seems a little more dummy-proof (not to mention a little more concise), especially with TypeScript (with proper Types, you'd get an error if you repeated boolA because boolB wouldn't be part of the return of usePartialStore):

const {boolA, boolB, boolC} = usePartialStoreWithShallow('boolA', 'boolB', 'boolC');

There are already some decent suggestions here, but I figured I'd give a +1 to the sentiment behind the issue.