bcherny / undux

Excellent library contrasting with Redux!

A pattern typically in my applications is to have multiple types of stores to have some separation. E.g. A store for authentication data and a store for todos. I've been trying out undux and it seems like there's only the concept of a single store, regardless of model type. Is there a way to have multiple stores like MobX? Or am I missing something architecturally about the intention of a single store?

Hey there @phillipchan2! You can create as many stores as you want (I should really update the docs with an example).

Either nest stores, like this:

undux/test/react/createConnectedStore.tsx

Line 172 in 40f0a3c

test('it should support interleaved stores', t => {

Or, namespace them like this: https://undux.org/#examples/namespaced-state

@bcherny Is there any advantages or disadvantages of using namespaced stores vs nested stores (like performance)?

I am using namespaces right now but it seems that nested might be easier from a code maintenance perspective and I was considering trying unless there's something glaringly obvious I'm ignorant of :)

I second the "excellent library" sentiment. I got tired of the boilerplate and after getting my head around rxjs & using effects properly its just a dream come true. All the best!

Hi all,

I definitively think that those questions should be documented.
I was asking in #88 quietly the same topics.

Thanks @bcherny to enlight us.
'Cause we are really fond of your work ;)

@bcherny Is there any advantages or disadvantages of using namespaced stores vs nested stores (like performance)?

I wouldn't worry about performance -- I haven't seen a case where Undux is a performance bottleneck. React's reconciler is fast, which makes Undux fast.

I'd suggest trying out separate stores with the Hooks API, instead of namespaced stores. It looks like this:

let StoreA = createConnectedStore({a: 1, b: 2})
let StoreB = createConnectedStore({c: 3, d: 4})

function MyApp() {
  return <StoreA.Container>
    <StoreB.Container>
      <MyComponent />
    </StoreB.Container>
  </StoreA.Container>
}

function MyComponent() {
  let storeA = StoreA.useStore()
  let storeB = StoreB.useStore()
  return <section>
    {storeA.get('a') + storeB.get('c')}
  </section>
}

I second the "excellent library" sentiment. I got tired of the boilerplate and after getting my head around rxjs & using effects properly its just a dream come true. All the best!

Thanks! :)

@bcherny, one issue though, is that withReduxDevtools plugin doesn't work with nested stores.

It does! #88

Nested, not namespaced ;)

It doesn't work on nested stores.
It does on namepaced ones.

// Stores
const URLStore = createConnectedStore
(
   { url : "" }
   ,withReduxDevtools
);

const LabelStore = createConnectedStore
(
   { label : "" }
   ,withReduxDevtools
);

// UI
import Root from './component/Root';

function App()
{
  return (
    <section className="App">
      <LabelStore.Container>
        <URLStore.Container>
            <Root />
         </URLStore.Container>
       </LabelStore.Container>
    </section>
  );
}

export default App;

Only one store is displaying in the devtools.
withLogger works as expected though.

How to have multiple stores?