Dynamic name in persisted storage

[sexta13]

Hi,

I would like to know if anyone has a good solution for this problem: I would like the key that would stay in sessionStorage to be something like: ${userId}-my-storage.
I only have my userId after a request, and I only render my application when I do have that userId.

This is something I came with:

const useStore = (): UseStore<SharedStore> => {
  const { myUser } = useGetMyUser();

  const options = {
    name: `${myUser?.id}-my-storage`,
    // eslint-disable-next-line no-undef
    getStorage: () => sessionStorage,
  };

  return create(
    persist<SharedStore>(
      (set: SetState<SharedStore>) => ({
        ........
      }),
      options
    )
  );
};

Then I had something like this:

const useSharedStore = <U>(
  selector?: StateSelector<SharedStore, U>,
  equalityFn?: EqualityChecker<U>
): U | SharedStore => {
  const store = useStore();

  return store(selector, equalityFn);
};

And then I used it like this:

const { foo, setFoo } = useSharedStore(
  (state) => ({
    foo: state.foo,
    setFoo: state.setFoo,
  }),
  shallow
);

The problem I have is that I don't get the updates in the component. I see it updating the storage, but the component don't get the updated values.

Any clue how to achieve this?

thanks

[dai-shi]

Creating a store in the component lifecycle requires some techniques. Basically, it needs to be stable with some kind of memoization.

See 👉 #398 (comment)

[sexta13]

but is there a way to isolate that into a separate custom hook so that can be reused by different components? if I create a codesandbox can you enlight me? thanks

[dai-shi]

In such a case, zustand/context might help. a codesandbox repro would help to assist, but please make it as minimal as possible.

[sexta13]

one last question, and I believe I won't need the codesandbox. If we use zustand/context, all the components that are inside that context will re-render if some prop changes? will it work the same way as contextapi, right? thanks

[dai-shi]

(assuming I understand the question correctly) no, zustand/context put a store itself in the context value, so the provider will never trigger re-renders when a value in the store is changed.

[sexta13]

Thanks. I've just tried out and works. Thanks again