fast-react-context icon indicating copy to clipboard operation
fast-react-context copied to clipboard

can't retrieve setter from useStore without retrieving state

Open mazengh opened this issue 3 years ago • 2 comments

The below code expects a selector... if no selector is used, an error is thrown.

const state = useSyncExternalStore(store.subscribe, () => selector(store.get()));

This can be fixed be just returning setting the getter to store.get when no selector is passed. Some like below.

const getter = selector ? () => selector(store.get()) : store.get; const state = useSyncExternalStore(store.subscribe, getter);

mazengh avatar Oct 21 '22 23:10 mazengh

I prefer to keep the get and set methods separate, something like this :

  function useStore() {
    const store = useContext(StoreContext);
    if (!store) {
      throw new Error('Store not found');
    }
    function query<SelectorOutput>(selector: (store: Store) => SelectorOutput) {
      return useSyncExternalStore(
        store.subscribe,
        () => selector(store.get()),
        () => selector(initialState)
      );
    }
    const dispatch = store.set;
    return { query, dispatch };
  }

So in my other components i can just use get or set

  const { query, dispatch } = useStore();
  const fieldValue = query((store) => store['value']); // retrieve value 
  dispatch({ value :  'Jon'}); // set value

nicosh avatar Nov 09 '22 12:11 nicosh

@mazengh maybe it can help you: const useStoreSetter = () => useStore(() => null).at(1);

Alim-El avatar May 09 '23 01:05 Alim-El