Using store ouside components discard a config variable

[0xmemorygrinder]

Hello, I am using zustand for a frontend project that needs to be generic and only rely on its config variables defined in the project.

Here is a sample config variable I use :

// src/config/vaults.config.ts:

export const vaultsConfig: VaultConfig = {
    key1: {
        subKey1: value1,
        ...
    },
    key2: ...
}

When I create a slice of my store, I use this config to create my state data.

function createDefaultData(): [VaultId, Vault][] {
  console.log(vaultsConfig);
  return Object.entries(vaultsConfig).map(([vaultId, vaultConfig]) => {
    return // prepared data
  })
}

const defaultState: State = {
  vaults: new Map<VaultId, Vault>(createDefaultData())
}

export const createVaultsStore: StateCreator<Store, [], [], VaultsStore> = (set, get) => ({
  ...defaultState,
  //methods here
});

I then create my store with all the slices that compose it.

Everything works fine when using the store inside next components. However, I need to access and mutate the state ouside of react components (which is normally supported.

I get an error when accessing the state by using

useStore().getState().myMethodToCall()

At this point, the error tells me that the config passed to Object.entries during my store creation is undefined. I logged the value and it really is.

How can I fix this ?

Thanks for your time.

[dbritto-dev]

@0xmemorygrinder would you mind sharing us a codesandbox demo? Just a minimal repto I would like to help you

[0xmemorygrinder]

Hello, do you have any update ?

[dbritto-dev]

@0xmemorygrinder can you try to recreate a minimal repro? I wasn't able to replicate your issue

[0xmemorygrinder]

I will try later today. If I cannot reproduce I will invite you to my repository

[0xmemorygrinder]

After days and days of debugging, I found a solution for my problem !

If you store an object in zustand and retrieve the plain object, you need to make a plain copy of the object before using it in a ref of useState otherwise it points to the same address in memory and the value stored in ref or state is updated when you update your store.

[dbritto-dev]

After days and days of debugging, I found a solution for my problem !

If you store an object in zustand and retrieve the plain object, you need to make a plain copy of the object before using it in a ref of useState otherwise it points to the same address in memory and the value stored in ref or state is updated when you update your store.

@0xmemorygrinder yeah, that's the expected behavior