Idea for destructuring data instead of using many use*Store() calls

[mikeaustin]

As I was reading how useSelector() works in Redux (and similar functionality in Zustand). I wondered if it would be possible to destructure data instead of having to use a use*Store() for every piece of data.

I prototyped a simple solution, where you provide all your selectors to useStore():

https://codepen.io/mikeaustin/pen/vYoOazz?editors=1010

Example

const useStore = createStore({
  todos: [{
    title: Date.now()
  }]
});

You can destructure your data without having to call so many functions:

function App() {
  const [[todos], dispatch] = useStore([
    (state) => state.todos
  ]);

  ...
}

In my prototype, reducers are standalone functions - no need to tie them to a particular store:

const addTodo = (title) => (state) => ({
  ...state,
  todos: [...state.todos, { title }]
});

I wouldn't call it production ready, but it's dead simple. zustand was an inspiration. Thoughts?

[dai-shi]

I don't dislike the idea, especially if useShallow doesn't work (in the future?)

const [foo, bar] = useSelectors(store, [
  (state) => state.foo,
  (state) => state.bar,
]);

It's fine for a third-part library, but adding this to the zustand core seems going against the philosophy.

[mikeaustin]

Sure, I understand it wouldn't be part of core, I just thought it was an interesting topic. I could see people pulling out lots of data which would require many, many calls to use*Store(). You can destructure with const { a, b, c } = useState({ ... }), for example.

I've extended the prototype (not zustand) in a repo and now it is fully typed (minus a few arrays to tuples coercions):
https://github.com/mikeaustin/todo-list/blob/main/src/App.tsx

[dai-shi]

I'm actually interested in comparing the performance difference. Would anyone like to give a shot?

const store = createStore(() => ({ foo: 1, bar: 2 }));

// multiple hooks
const [foo, bar] = [
  useStore(store, (state) => state.foo),
  useStore(store, (state) => state.bar),
];

// useShallow
const [foo, bar] = useStore(store, useShallow((state) => [
  state.foo,
  state.bar,
]));

// useSelectors (no implementation yet)
const [foo, bar] = useSelectors(store, [
  (state) => state.foo,
  (state) => state.bar,
]);

Of course, for the stress test, there should be dozens or hundreds of items, instead of just two.

[mikeaustin]

Oh, I like (state) => [state.foo, state.bar]. All selectors take the same argument, so there's no need to repeat it. Although if you use named selectors such as const foo = (state) => state.foo, useSelectors(store, [foo, bar]) could be shorter.

Maybe both variations would be useful.

[dai-shi]

You might be interested in this too: https://github.com/pmndrs/zustand/blob/6b29015c3b9fdf5a5aa08b69811044f90c0f8d1b/docs/guides/auto-generating-selectors.md

zustand/docs/guides/auto-generating-selectors.md

Lines 129 to 134 in 6b29015

	## Third-party Libraries
	- [auto-zustand-selectors-hook](https://github.com/Albert-Gao/auto-zustand-selectors-hook)
	- [react-hooks-global-state](https://github.com/dai-shi/react-hooks-global-state)
	- [zustood](https://github.com/udecode/zustood)
	- [@davstack/store](https://github.com/DawidWraga/davstack)