Provide a more concise usage method for Zustand

[bp-hu]

Hello, I have recently used zustand in our business. I found that this library is very simple and flexible, making our code more concise and elegant. However, there are still some boilerplate codes in some special business scenarios. So I have implemented some syntactic sugar based on our usage scenarios and hope to have some discussions and exchanges with everyone.

For specific code, you can see the implementation of the library: @bphu/zustand-react.

The main functional points implemented are as follows：

• TypeScript ready;
• Support computed state;
• Simpler selector usage;
• Combine with React.Context more conveniently;

The following is a typical usage example：

import { create } from '@bphu/zustand-react';

// The create function are just syntactic sugar for zustand. They have the combine middleware built in. So it is typescript ready.
const useStore = create({
  bears: 0
}, (set) => ({
  removeAllBears: () => set({ bears: 0 }),
}),
// The third parameter is used to define derived state. Internally, it will be converted to the usage of selector.
(state) => ({
  get isEmpty() {
    return state.bears === 0;
  }
}));

function App() {
  // The get property is inspired by the chapter of ["auto-generating-selectors"](https://zustand.docs.pmnd.rs/guides/auto-generating-selectors) and supports extracting states, methods, and derived states.
  const { bears, removeAllBears, isEmpty } = useStore.get('bears', 'removeAllBears', 'isEmpty');
  return ...;
}