reduxDevtools plugin for namespaced stores

[Eric Priou]

I wonder how it'd be possible to use the devtools with namespaced store.
An error is thrown.

export default createConnectedStoreAs
(
    {
        i18n
        , urls : manifest.urls
    }
    ,stores => withReduxDevtools( effects(stores) ) 
);

Is it feasible ?
Any other way to compose connected stores ?

[Boris Cherny]

Hey there @erixtekila! You want to do something like this:

export default createConnectedStoreAs(
  {i18n, urls: manifest.urls},
  ({i18n, urls}) => ({
    i18n: withReduxDevtools(withEffects(i18n)),
    urls: withReduxDevtools(withEffects(urls))
  })
);

I encourage you to use the useStore hook and createConnectedStore instead, which makes it more ergonomic to avoid createConnectedStoreAs.

[Eric Priou]

Thanks.
The useStores hook seems also ergonomic to me.

Could you elaborate on why createConnectedStoreAs is not, please ?

[Eric Priou]

And also, why withEffect is not documented anywhere ?
Is it a deprecated HOC or something ?

What this function do, that effect() don't ?
Could I write it like so :

export default createConnectedStoreAs
(
    {
        i18n
        , urls : manifest.urls
    }
    ,{ i18n, urls } => 
    (
         {
           i18n : withReduxDevtools(withEffects(i18n)
          , urls: withReduxDevtools(withEffects(urls))
         }
      )
); 

Namespaced stores are convenient to make there properties reactive.
Flat stores don't expose nested fields, ain't it ?
Something along the line :

store.get( "i18n.yes" )

where yes is a sub field of i18n.

[Boris Cherny]

Could you elaborate on why createConnectedStoreAs is not, please?

useStore is a way to keep your stores decoupled. With the hooks API, there's no need for createConnectedStoreAs anymore (the reason I introduced it originally was to reduce the boilerplate it takes to hook up a component to multiple stores using the withStore HOC API). useStores is simpler, and might make it easier for others to understand your code.

[Boris Cherny]

And also, why withEffect is not documented anywhere

withEffect/effect is a function that you define, so you can call it anything :) See https://undux.org/#quick-start/2.

store.get( "i18n.yes" )

That API wouldn't be typesafe, unfortunately.

[Eric Priou]

Thanks @bcherny
At first, I thought useStores (ending "s") was related to createConnectedStoreAs (ending "as").
It seems that it is not the case.
I'll dig in the source to understand and maybe document my findings.

Your tests seems a good learning path too !

[Boris Cherny]

So to clarify:

• useStore is the name of the React hook that's created when you call createConnectedStore
• useStores is the name of the React hook that's created when you call createConnectedStoreAs

Hope that makes sense :)

[Eric Priou]

Ah, you confirm what I've found.
Thanks