How can we integrate redux toolkit?

[LitHaxor]

There was an option in the react to add store in react App

<Provider store={store}> <App /> </Provider>

How can I integrate this into preact

[xstevenyung]

Not possible at the moment as nested component are not supported (but some PR is on the way #517)

What are you trying to achieve ?

[hugotox]

What are you trying to achieve ?

Prob client side shared state between islands. I'm interested on learning how to do that (don't care about redux)

[xstevenyung]

Good question, I personally have no idea how it could be achieved, maybe like Astro is doing currently using Nanostores? https://docs.astro.build/en/core-concepts/sharing-state/

[xstevenyung]

Ok, I manage to hack a quick solution with Nanostores, but it's not pretty. I would avoid it if possible.

In the root of your page, we are going to init the store

      <script type="module">
        {`import { atom } from 'https://esm.sh/[email protected]'; window.isCartOpenAtom = atom(false);`}
      </script>

Note that we have to put the code as a string and we need to use attach the store to the window to access it later.

Now we can use in an island like this:

/** @jsx h */
import { h } from "preact";
import { useEffect, useState } from "preact/hooks";
// This is a custom hook as `@nanostores/preact` wasn't working
function useStore(store) {
  const [state, setState] = useState(store?.get());

  useEffect(() => {
    store.subscribe((value) => setState(value));
  }, []);

  function setStoreState(value) {
    store.set(value);
  }

  return [state, setStoreState];
}

export default function () {
  // we mount the store with out custom hook and our store is attached to the `window`
  // we can repeat that in other islands
  const [isCartOpen] = useStore(window.isCartOpenAtom);
  return <div>{isCartOpen ? "Open" : "not open"}</div>;
}

It works but Typescript is throwing warning left and right, use at your own risk

[WNemencha]

Hey guys, i've been experimenting with a similar idea and toyed with using server-side session as a useSessionStorage() hook that basically fetch to the api the get/set the session storage, i plan to try improve it using a websocket as to avoid carrying the extra size of HTTP headers every single state change, which should greatly improve perfs of that, and could give a way to forceUpdate at the right time (i.e. time at which state change sync event happens)... that's just some ideas, let me know if that helps ;)

[czottmann]

@LitHaxor My suggestion is to go the easiest route and implement a very simple store. Here's my write-up on how to use cross-island state management in Fresh (https://zottmann.org/2022/07/31/how-to-use.html) and a link to the related discussion that made me do the write-up (#230). Hope this helps!

[xstevenyung]

Seems to be a bug when using Statery + useState in the same island

I created an issue to track it: #594

[czottmann]

@xstevenyung It is a bug but one in ESM.sh — and it's an issue I've been bitten by before myself. Basically, ESM's &external=preact doesn't work correctly. If you change your Statery URL from …

https://esm.sh/[email protected]?alias=react:preact/compat&external=preact

… to …

https://esm.sh/[email protected]?alias=react:preact/compat&[email protected]

… it works fine. Using &external= ESM will cram in [email protected] as dependency, and that'll clash with 10.8.2 coming with Fresh.

[xstevenyung]

oh thanks for pointing it out, I had no clue about this issue. everything's working great 👌

[amoreaulemay]

How about an observer pattern? I made a quick demo here: https://deno.land/x/fresh_store@alpha