reduxDevtools plugin for namespaced stores

[erixtekila]

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 ?

[bcherny]

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.

[erixtekila]

Thanks. The useStores hook seems also ergonomic to me.

Could you elaborate on why createConnectedStoreAs is not, please ?

[erixtekila]

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.

[bcherny]

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.

[bcherny]

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.

[erixtekila]

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 !

[bcherny]

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 :)

[erixtekila]

Ah, you confirm what I've found. Thanks