Zustand 4 can't use store outside react

[mgscreativa]

Hi! following the advise here https://github.com/pmndrs/zustand#using-zustand-without-react I'm trying to use my zustand appContextStore outside react (in a helper.js file)

My deps are:
"react": "18.0.0",
"react-native": "0.69.4",
"zustand": "^4.0.0",

This is my appContextStore,js:

import create from 'zustand';

const appContextStore = create((set) => ({
  clientURL: '',
  setClientURL: (clientURL) => set({ clientURL }),
  firstLoad: true,
  setFirstLoad: (firstLoad) => set({ firstLoad }),
}));

export default appContextStore;

Then, this is my helper.js file:

import create from 'zustand'
import appContextStore from '../stores/appContextStore';

const useBoundAppContextStore = create(appContextStore); <-- this creates an error

This is the error generated, it seems that something about react is still needed...

ExceptionsManager.js:149 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
ExceptionsManager.js:149 TypeError: Cannot read properties of null (reading 'useRef')

[adrianotadao]

@mgscreativa I think you should do

import createStore from 'zustand/vanilla';

const appContextStore = createStore((set) => ({
  clientURL: '',
  setClientURL: (clientURL) => set({ clientURL }),
  firstLoad: true,
  setFirstLoad: (firstLoad) => set({ firstLoad }),
}));

export default appContextStore;

Have you tried it yet?

[mgscreativa]

Hi @adrianotadao If I do that, ¿will it break my appContextStore if I use it in my react components?

In other words, If I implement the store like you suggest, ¿will I still be able to use that store in react components and still get components to re render on store changes?

Thanks!

[themre]

We're also using vanilla store because accessing stuff outside of React and using useStore breaks a lot of stuff. Because with previous syntax we used this:

const myStore = create(myVanillaStore) // crated with createStore
const data = myStore(selector)

But now if we use useStore, we don't have the option to pass a selector inside, we get immediately our defined store state. How should we proceed here? Thx!

[Annukul]

I am able to access store values outside of react component by using
const auth = AuthStore.getState()

But the issue here is that auth variable is assigned the initialState value and even after updating the state, the variable still references to the initialState

[puneety95]

Any solutions to this ?

[dai-shi]

Can you create a minimal reproduction (just one file with as a few lines as possible) with https://codesandbox.io/s/react-new ?