[question] whether can observe a state under zustand store, not in a component?

[liaodalin19903]

I have a requirement: I want to observe the state of zustand store, and when it change I can do something else.

we know we can use subscribe to listen a state changes(code is below), but I want to know whether this listen function can implement in store(not in a react component)?

---

The detail code:

src/store/testSliceStore.ts

import { create, StateCreator } from "zustand";
import { subscribeWithSelector } from "zustand/middleware";

export interface ASlice {
  aState: string,
  action1: () => void,
  action2: () => void 
}

export interface BSlice {
  bState: string,
  action1: () => void,
  action2: () => void 
}

export const createASlice: StateCreator<ASlice & BSlice, [], [["zustand/subscribeWithSelector", never]], ASlice> = (set, get) => ({
  aState: 'a',
  action1: () => {

  },
  action2: () => {
    // get can obtain the variables or methods defined in this Slice
  }
});

export const createBSlice: StateCreator<ASlice & BSlice, [], [["zustand/subscribeWithSelector", never]], BSlice> = (set, get) => ({
  bState: 'b',
  action1: () => {

  },
  action2: () => {
    // get can obtain the variables or methods defined in this Slice

    const { aState } = get()
    console.log(aState)
  }
});

// Zustand store
export const useStore = create<ASlice & BSlice>()(subscribeWithSelector((...params) => ({
  ...createASlice(...params),
  ...createBSlice(...params)
})));

usage:
src/App.tsx

import { useEffect } from 'react'
import './App.css'

import { useStore } from './store/testSliceStore' 

function App() {

  const { bState } = useStore()

  useEffect(() => {
    
    useStore.subscribe(
      state => state.aState,
      (aState, prevAState) => {
        console.log(aState, prevAState)
      }
    )
  }, [])

  return (
    <>
      { bState }
    </>
  )
}

export default App

[dbritto-dev]

@liaodalin19903 sure, instead of create you can use createStore and useStore, something like this:

const store = createStore()

store.subscribe(...)

const Component = () => {
  const state = useStore(store)

  useEffect(() => {
      const unsubscribe = store.subscribe(...)
      return () => {
        unsubscribe()
      }
  }, [])

  return null
}

[liaodalin19903]

Thank you for your reply, but what I mean is whether the observe code can be written in the src/store/testSliceStore.ts file instead of within the React component.

[dbritto-dev]

@liaodalin19903 that's it

const store = createStore()

store.subscribe(...)

[dbritto-dev]

you don't need react you can use a vanilla store and then reuse it on a react component