How to subscribe / unsubscribe to specific parts of the state?

[Stwissel]

I have a Zustand store as follows:

import { create } from 'zustand';
import { immer } from 'zustand/middleware/immer';

const initialRating = {
  id: 'rating1',
  stars: 5,
  score: 3,
  size: '24px',
  title: 'Food'
};

export const useRatingStore = create()(
  immer((set) => ({
    ratings: {
      [initialRating.id]: initialRating
    },

    removeAllRatings: () =>
      set((state) => {
        state.ratings = {};
      }),
    newRating: (payload) =>
      set((state) => {
        if (state.ratings[payload.id]) {
          console.error('Rating already exists', payload);
        } else {
          state.ratings[payload.id] = payload;
          if (payload.score > payload.stars) {
            state.ratings[payload.id].score = payload.stars;
          }
        }
      }),

    updateScore: (payload) =>
      set((state) => {
        const toUpdate = payload;
        if (Array.isArray(toUpdate)) {
          toUpdate.forEach((rating) => {
            if (state.ratings[rating.id]) {
              const proxyState = state.ratings[rating.id];
              proxyState.score = Math.min(rating.score, proxyState.stars);
            } else {
              console.error('updateScore not found', rating.id);
            }
          });
        } else if (state.ratings[toUpdate?.id]) {
          const proxyState = state.ratings[toUpdate.id];
          proxyState.score = Math.min(toUpdate.score, proxyState.stars);
        } else {
          console.error('Invalid updateScore payload', payload);
        }
      }),
    updateStars: (payload) =>
      set((state) => {
        const toUpdate = payload;
        if (Array.isArray(toUpdate)) {
          toUpdate.forEach((rating) => {
            if (state.ratings[rating.id]) {
              const proxyState = state.ratings[rating.id];
              proxyState.stars = rating.stars;
            } else {
              console.error('updateStars not found', rating.id);
            }
          });
        } else if (state.ratings[toUpdate?.id]) {
          const proxyState = state.ratings[toUpdate.id];
          proxyState.stars = toUpdate.stars;
        } else {
          console.error('Invalid updateStars payload', payload);
        }
      }),
    updateSize: (payload) =>
      set((state) => {
        const toUpdate = payload;
        if (Array.isArray(toUpdate)) {
          toUpdate.forEach((rating) => {
            if (state.ratings[rating.id]) {
              state.ratings[rating.id].size = rating.size;
            } else {
              console.error('updateSize not found', rating.id);
            }
          });
        } else if (state.ratings[toUpdate?.id]) {
          state.ratings[toUpdate.id].size = toUpdate.size;
        } else {
          console.error('Invalid updateSize payload', payload);
        }
      })
  }))
);

It keeps track of a variable number of ratings. Works like a charm with reactJS. Now I need to react to changes in individual components in non-ui parts of the app. The subscribe methods seems to be a good candidate. I can do:

useRatingStore.subscribe((state, oldState) => console.log('state', state, 'oldState', oldState));

and get all ratings. However I'd like to subscribe to specific ratings only. How do I do this? Also: how to unsubscribe?

[dbritto-dev]

@Stwissel here you go -> https://github.com/pmndrs/zustand?tab=readme-ov-file#using-subscribe-with-selector

[Stwissel]

Thank you

[Stwissel]

Based on the documentation I changed my store to

export const useRatingStore = create()(
  subscribeWithSelector(
    immer((set) => ({
      ratings: {
        [initialRating.id]: initialRating
      },

      removeAllRatings: () =>
        set((state) => {
          state.ratings = {};
        }),
      newRating: (payload) =>
        set((state) => {
          if (state.ratings[payload.id]) {
            console.error('Rating already exists', payload);
          } else {
            state.ratings[payload.id] = payload;
            if (payload.score > payload.stars) {
              state.ratings[payload.id].score = payload.stars;
            }
          }
        }),

      updateScore: (payload) =>
        set((state) => {
          const toUpdate = payload;
          if (Array.isArray(toUpdate)) {
            toUpdate.forEach((rating) => {
              if (state.ratings[rating.id]) {
                const proxyState = state.ratings[rating.id];
                proxyState.score = Math.min(rating.score, proxyState.stars);
              } else {
                console.error('updateScore not found', rating.id);
              }
            });
          } else if (state.ratings[toUpdate?.id]) {
            const proxyState = state.ratings[toUpdate.id];
            proxyState.score = Math.min(toUpdate.score, proxyState.stars);
          } else {
            console.error('Invalid updateScore payload', payload);
          }
        }),
      updateStars: (payload) =>
        set((state) => {
          const toUpdate = payload;
          if (Array.isArray(toUpdate)) {
            toUpdate.forEach((rating) => {
              if (state.ratings[rating.id]) {
                const proxyState = state.ratings[rating.id];
                proxyState.stars = rating.stars;
              } else {
                console.error('updateStars not found', rating.id);
              }
            });
          } else if (state.ratings[toUpdate?.id]) {
            const proxyState = state.ratings[toUpdate.id];
            proxyState.stars = toUpdate.stars;
          } else {
            console.error('Invalid updateStars payload', payload);
          }
        }),
      updateSize: (payload) =>
        set((state) => {
          const toUpdate = payload;
          if (Array.isArray(toUpdate)) {
            toUpdate.forEach((rating) => {
              if (state.ratings[rating.id]) {
                state.ratings[rating.id].size = rating.size;
              } else {
                console.error('updateSize not found', rating.id);
              }
            });
          } else if (state.ratings[toUpdate?.id]) {
            state.ratings[toUpdate.id].size = toUpdate.size;
          } else {
            console.error('Invalid updateSize payload', payload);
          }
        })
    }))
  )
);

Now I can:

const key = 'rating1';
const sub = useRatingStore.subscribe(
(state) => state.ratings[key],
(newR, oldR) => changeSignal(newR, oldR));

and process it:

const changeSignal = (newR, oldR) => {
    if (newR.score !== oldR.score || newR.stars !== oldR.stars) {
      console.log(
        `Rating ${newR.id} changed from ${oldR.score}/${oldR.stars} to ${newR.score}/${newR.stars}`
      );
    }
  };

I also tried (state) => state.ratings[key].score which returns - as expected - the score value.
while (state) => [state.ratings[key].score, state.ratings[key].stars] would fire for all members on any change.

What do I miss?

btw: love your work!

[dbritto-dev]

@Stwissel sure, let me help you. You are missing the equality function when you try to compare complex data types like objects/arrays/maps/sets you can use a shallow comparison or a deep comparison but in the case of stars a shallow comparison would be enough and you can use the shallow function that's built in zustand