How to have multiple stores?

[phillipchan1]

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?

[bcherny]

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: https://github.com/bcherny/undux/blob/40f0a3cc2a3a22bb6c440c91ecd918d9fc7dcd54/test/react/createConnectedStore.tsx#L172

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

[nevelis]

@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!

[erixtekila]

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]

@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>
}

[bcherny]

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

[erixtekila]

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

[bcherny]

It does! https://github.com/bcherny/undux/issues/88

[erixtekila]

Nested, not namespaced ;)

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

[erixtekila]

// 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.