Destroy dynamically created stores

[KnightSlayer]

Hi

I'm using subscribeWithSelector and devtools middlewares . Let me share some of my code. Here is my helper function for store creation:

  import { createStore } from "zustand/vanilla";
  import { subscribeWithSelector, devtools } from "zustand/middleware";
  import type { StateCreator } from "zustand";
  
  export const createMyStore = <S>(name: string, cb: StateCreator<S> ) => createStore<S>()(
    subscribeWithSelector(
      devtools(cb, { name: "@my/root", store: name }),
    ),
  );

I'm dynamically creating stores. For example imagine I'm creating separate store for each row of dynamic table:

type TableRowState = {
 // state interface
}
const createTableRowStore = (rowId: string) => createMyStore<TableRowState>(rowId, () => {})


const row1Store = createTableRowStore('row1')
const row2Store = createTableRowStore('row2')

Some times (i.e. table page changed) I want to destroy some of my stores. I don't want to "clear" state. I want to completely destroy the store. So that it will be deleted even from devtools. Is it possible? Could anybody help me please?

PS row2Store.destroy() method is deprecated and anyway it doesn't really destroy the store

[KnightSlayer]

@dai-shi
please take a look at my question

[dai-shi]

I will do it later. But, if anyone can, please feel free.

[dbritto-dev]

@KnightSlayer wouldn't be better to store your stores in a map and then clear the map or each store individually, would it? For instance:

const stores = new Map()

// creating stores
stores.set('row1Store', createTableRowStore('row1'))
stores.set('row2Store', createTableRowStore('row2'))

// deleting stores
stores.delete('row1Store')

// deleting all stores
stores.clear()

[KnightSlayer]

wouldn't be better to store your stores in a map and then clear the map or each store individually, would it?

devtools will still be cluttered with deleted stores

[dai-shi]

Zustand stores are basically garbage collectable if there are no subscriptions.
So, the only issue is devtools, right?

zustand/src/middleware/devtools.ts

Line 252 in a4578fa

).subscribe((message: any) => {

As it doesn't hold the unsubscribe function, it's not currently possible.
It would be an improvement to attach a method so that we can do useMyStore.disconnectDevtools().
Anyone can try that, but it's pretty challenging. (Like, trackedConnections and TypeScript typing.)

Meanwhile, only the solution would be avoid using devtools...

[KnightSlayer]

of course both

[rmartineztcti]

So, if there is not any component in the whole tree that is subscribed to a store, this one is effectively destroyed?

If I have these routes in my app:

A (subscribed to store)
|
|
B
|
|
C (subscribed to store)

And I go from A, to B, and then to C; does it mean that I would have lost the data of the store when I arrive to C?

[KnightSlayer]

@rmartineztcti not quite. it might be useful for you to read a little about what garbage collectable means

store can be destroyed even with subscribers if the subscribers are garbage collected

store will not be destroyed if you have direct link to it. so don't worry about "lost the data"

[rmartineztcti]

It is hard for me to imagine a scenario when a store would actually be destroyed then, and I would love to get to know one of these scenarios so I can understand better.

Based on what you said, while we are on B, the store could be garbage collected. But that would beat the persistency of the data on a global state management library like this one, of course.

I have been trying to come up with a solution where I can keep substores alive for only some paths of my app.

[KnightSlayer]

@rmartineztcti
eg you can use zustand for local state of component (instead of useState or useReducer). so store will be destroyed when component unmounted (if you don't use devtools plugin)

import { createStore } from 'zustand/vanilla'
import { create } from 'zustand'

const MyComponent = () => {
  const [useBearStore] = useState(() => create((set) => ({
    bears: 0,
    increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
    removeAllBears: () => set({ bears: 0 }),
  })))
  // OR vanila
  const [store] = useState(() => createStore())

  // ...

  return <div>...</div>
}