subscribeWithSelector doesn't fire or notify only on state changes that's passed to subscribe

[guenyoo]

Hey folks,

I like Zustand a lot and would actually need to use it in between React and VanillaJS, however I'm running into problems. Am I using it incorrectly or is something not working correctly?

I'm referencing to this part of the documentation:

Reading/writing state and reacting to changes outside of components

I've also created a codesandbox to illustrate the problem:

It's very basic:

import create from "zustand";
import { subscribeWithSelector } from "zustand/middleware";
const useStoreWithSelector = create(
  subscribeWithSelector(() => ({ paw: true, snout: true, fur: true }))
);

useStoreWithSelector.subscribe(console.log, (state) => state.paw);

useStoreWithSelector.setState({ paw: false });
useStoreWithSelector.setState({ fur: false });

What I'm expecting to happen is that only the changes to state.paw are going to be logged to the console, so basically two logs. One initial and one after it's set to false.

What's actually happening is that I get three logs because I'm getting the state logged when fur changes, too.

In your docs it's a similar example:

// Listening to selected changes, in this case when "paw" changes
const unsub2 = useStore.subscribe(console.log, state => state.paw)

Here's a console screenshot:

However, that example also fails. And what's also failing in your docs is copying the whole segment and running it in a sandbox because of the use of shallow variable and not importing create first. I get that this second point is a bit nitpicky maybe but it would be neat to copy a block of code without running into errors first.

[dai-shi]

I think that doc is under construction.

Please see README.md: https://github.com/pmndrs/zustand#using-subscribe-with-selector

You are very welcome to contribute to fix the docs.

[guenyoo]

I see, thanks a lot.

For everyone else coming across this issue, this works fine:

import create from "zustand";
import { subscribeWithSelector } from 'zustand/middleware'

const useDogStore = create(
  subscribeWithSelector(() => ({ paw: true, snout: true, fur: true }))
)

// Listening to selected changes, in this case when "paw" changes
const unsub2 = useDogStore.subscribe((state) => state.paw, console.log)
// Subscribe also exposes the previous value
const unsub3 = useDogStore.subscribe(
  (state) => state.paw,
  (paw, previousPaw) => console.log({paw, previousPaw})
);

useDogStore.setState({paw: false});
useDogStore.setState({snout: false});
useDogStore.setState({fur: false});

and logs:

@dai-shi I would love to help with the documentation example but I haven't done anything like that before. Is there a guide on how to contribute somewhere?

[dai-shi]

I would love to help with the documentation example but I haven't done anything like that before. Is there a guide on how to contribute somewhere?

@guenyoo Please join this thread #1033 (comment) and say you want to contribute. I hope @chrisk-7777 can assist you.

[chrisk-7777]

Thanks @guenyoo ! I've @ 'ed you over on the main discussion thread about docs.
Please don't hesitate to let me know if you have any questions

[guenyoo]

Will do! Once I‘m finished with work I‘ll try to get my bearings and will ask you how to contribute. Thanks for the quick replies!