Diablow/zustand-store-addons

persist from "zustand/middleware" is not compatible with create from "zustand-store-addons"

Axibord opened this issue · 3 comments

Axibord commented

import { persist } from 'zustand/middleware' is not supported

main issue: we can't use any storage (localStorage, sessionStorage...) with the create function from "zustand-store-addons"

I will try to fix this if I can understand the code, @Diablow if you can look at this issue or give me direction on how to fix it myself would be real cool

Axibord commented

@bbenoist Hi, do you think the last merge break "persist" from "zustand/middleware" ?

Diablow commented

Hi,

Sorry I took this long to reply. I didn't find issues using persist with the provided create function, you just need to set the middleware options accordingly. Please take a look at the following example:

import create from "zustand-store-addons";
import { persist } from "zustand/middleware";

const _persist = (store) => persist(store, { name: "myStore" });

const useStore = create((set, get) => ({
  count: 0,
  increment() {
    set((state) => ({ count: state.count + 1 }));
  }
}),
{
  middleware: [_persist]
});

export default function App() {
  const [count, increment] = useStore("count, increment");

  function delStorage() {
    useStore.persist.clearStorage();
  }

  return (
    <div className="App">
      <h1>{count}</h1>
      <button onClick={increment}>Increment count</button>
      <button onClick={delStorage}>Clear storage</button>
    </div>
  );
}

Here you can see how to setup middleware functions with the addon: https://github.com/Diablow/zustand-store-addons#middleware-chaining-addonsmiddleware

  • 👍1
Axibord commented

Hi,

Sorry I took this long to reply. I didn't find issues using persist with the provided create function, you just need to set the middleware options accordingly. Please take a look at the following example:

import create from "zustand-store-addons";
import { persist } from "zustand/middleware";

const _persist = (store) => persist(store, { name: "myStore" });

const useStore = create((set, get) => ({
  count: 0,
  increment() {
    set((state) => ({ count: state.count + 1 }));
  }
}),
{
  middleware: [_persist]
});

export default function App() {
  const [count, increment] = useStore("count, increment");

  function delStorage() {
    useStore.persist.clearStorage();
  }

  return (
    <div className="App">
      <h1>{count}</h1>
      <button onClick={increment}>Increment count</button>
      <button onClick={delStorage}>Clear storage</button>
    </div>
  );
}

Here you can see how to setup middleware functions with the addon: https://github.com/Diablow/zustand-store-addons#middleware-chaining-addonsmiddleware

Thank you so much, my bad I didn't understood well enough the "middleware" property you added, but now I understand il well, it works fine, thx for the library, simple, clear and very useful indeed.

  • 👍1