Action does not work when Store is created using initProps

[pdhruv93]

Here is the link to sandbox
The updateName action doesn't do anything. I think I am doing it wrong. I am using the createStore Hook to use the action. But whats the correct way to implement it?

[dbritto-dev]

@pdhruv93 here you go -> https://codesandbox.io/p/sandbox/react-zustand-init-forked-nzp4qy?file=%2Fsrc%2FApp.tsx%3A15%2C11

[dbritto-dev]

Some things you need to know about create is that returns a custom hook, when you wrap create inside of other function you are creating a custom hook factory (in a nutshell a closure), so in order to create the custom hook you need to call your function that creates the custom hook and then use that custom hook. For instance

const createUseCounter = (initialCount = 0) => {
  return create((set) => ({
    count: initialCount,
    inc: () => set((state) => ({ count: state.count + 1 })),
  }));
}

const Counter = () => {
  const useCounterRef = useRef()
  if (!useCounterRef.current) {
    useCounterRef.current = createUseCounter()
  }
  const { count, inc } = useCounterRef.current()

  return <button type="button" onClick={inc}>{count}</button>
}

[pdhruv93]

Thanks a lot @dbritto-dev. The action works now. The only challenge I have now is with the store subscription:

useNameStore().subscribe(
        (state) => [
            state.name
        ],
        () => doSomething(),
        { equalityFn: shallow }
    );

Getting error Expected 1 arguments, but got 3. Here is the link to the sandbox for quick check

[dbritto-dev]

@pdhruv93 here you go -> https://codesandbox.io/p/sandbox/react-zustand-init-forked-nzp4qy?file=%2Fsrc%2FApp.tsx%3A26%2C7

[dbritto-dev]

@pdhruv93 keep me in the loop

[pdhruv93]

@dbritto-dev Works perfectly. A new problem now is that the state is not getting shared between components. It is creating a new store for each component. Sandbox link.

[dbritto-dev]

@pdhruv93 yeah, that's expected if you want to share store then you need to use useContext and Context API , something like this -> https://codesandbox.io/p/sandbox/gifted-dan-m2f8zj?file=%2Fsrc%2FApp.tsx%3A29%2C32

[pdhruv93]

Aha. The zustand docs starts making sense now after this. All of this is needed for creating store from init props. Thanks a lot for such quick response!

[pdhruv93]

@dbritto-dev Isn't there some other way to populate the store(also share the store) other than using the context? I kind of feel that using context is killing the flexibility of zustand store. I can only access the store and store state under the context provider.

One way I find is to just to create an action under store to set the states to input props. But setting the states this way is causing the subscription to run

[dbritto-dev]

@pdhruv93 it depends on your needs if you are building an SPA application you normally don't need to use context but talking about nextjs that's a requirement and also a recommendation

We use to use createStore instead of create since that's the recommended way

[pdhruv93]

@dbritto-dev I have this simple sandbox using Context and createStore

Changing fName also re-renders the other component where I am not using fName from store. Is there something wrong or it is as expected? If that's the case what's the point to Zustand to highlight render optimization and the changes impact only the components that are subscribed?

[dbritto-dev]

@pdhruv93 the right way to avoid extra renders is by using useStoreWithEqualityFn from zustand/traditional instead of useStore from zustand so you hook should look like this:

export function useNameStoreContext<T>(selector: (state: NameStore) => T): T {
  const context = useContext(NameStoreContext);
  if (!context) {
    throw new Error("useNameStore must be used within NameStoreProvider");
  }
  return useStoreWithEqualityFn(context, selector, shallow);
}

Note: for more complex cases you want to use a deep equality fn instead of shallow

[pdhruv93]

Thanks a lot @dbritto-dev , you have been super helpful all the time

[pdhruv93]

@dbritto-dev Is it possible to access the current store params from within the subscription. I would like to make a call to the api sending in all the store params. I could only get the current state of the subscribed store params

nameStore.subscribe(
        (state) => [state.fName, state.lName],
        () => {GET ALL THE STORE PARAMS HERE, NOT JUST WHAT ARE SUBSCRIBED},
        { equalityFn: shallow },
      );

[dbritto-dev]

@dbritto-dev Is it possible to access the current store params from within the subscription. I would like to make a call to the api sending in all the store params. I could only get the current state of the subscribed store params

nameStore.subscribe(

        (state) => [state.fName, state.lName],

        () => {GET ALL THE STORE PARAMS HERE, NOT JUST WHAT ARE SUBSCRIBED},

        { equalityFn: shallow },

      );

@pdhruv93 yes, it's possible with nameStore.getState()

[pdhruv93]

@dbritto-dev everything now works, the store is also populated. One problem:
The store is getting recreated multiple times, the first time with the correct initProps and after that the initProps are getting erased:

I logged this:

export const useNameStore = (initProps?: Partial<NameStoreProps>) => {
    const useNameStoreRef = useRef<ReturnType<typeof createNameStore>>(
        undefined as never
    );
    console.log(':::Creating store');

    if (!useNameStoreRef.current) {
        console.log(':::Creating new', initProps);
        useNameStoreRef.current = createNameStore(initProps);
    }
    return useNameStoreRef.current;
};

I see following logs:

:::Creating store
:::Creating new {fName: 'fff', lName: 'lll'}
:::Creating store
:::Creating store
:::Creating store

[pdhruv93]

Then what might be the reason my store is getting cleared? When I log some state from store, it prints undefined, only first time it is printed.

[pdhruv93]

aah it is something else related to my other code, store works fine, thanks!

[dbritto-dev]

@pdhruv93 hmmm would you mind sharing us a minimal repro on stackblitz? btw, we recommend use createStore instead of create when you want to use a custom hook factory

[pdhruv93]

Here it is on codesandbox. Let me know it anything else is needed too

[dbritto-dev]

@pdhruv93 everything looks good to me