[Proposal] Lazy models

The addModel and removeModel API doesn’t feel as integrated as the rest of the APIs. This proposal will detail an inline approach of declaring your code-split/lazy-loaded models.

Details coming soon.

[allpro]

It would be great if EP could handle nested/name-spaced models. In my current project we have over a hundred models. To make this scale manageable, every model is categorized by a namespace, like devices.groups, devices.freeze, devices.data, devices.geoFence, devices.data, devices.dataPoints, etc.

I’d like to be able to dynamically add models because some product features are user-specific, but currently it’s impossible because EP cannot handle adding a model with a nested path. I have mentioned this before but it wasn’t considered a priority then. However if working on updating the dynamic model handling, please consider handling ‘model paths’ like devices.groups in addition to simple model names in the root of the store.

[kamikazePT]

@ctrlplusb

The only thing I dont like that much about that approach is that you are still obligated to know at the root level about the entire app state model

I would like to be able to further down the react tree be able to mount/unmount slices of state

what about this?

import { lazy } from 'easy-peasy';
const ProductsModel = lazy(() => import('./models/products'))

// and then

function ProductsSection() {
  return (
    <ProductsModel>
      <ProductsList />
    </ProductsModel>
  )
}

// or

function ProductsSection() {
  return (
    <ProductsModel keepMounted>
      <ProductsList />
    </ProductsModel>
  )
}

the flag keepMounted would keep the state model even if it was unmounted, otherwise it would wipe and re-create on mount/unmount of ProductsSection

EDIT: But now the lazy call seems worthless, my initial draft was something like

import { Store } from 'easy-peasy'
import model from './model'

function ProductsSection() {
  return (
    <Store.Model model={model}>
      <ProductsList />
    </Store.Model>
  )
}

// or

function ProductsSection() {
  return (
    <Store.Model model={model} keepMounted>
      <ProductsList />
    </Store.Model>
  )
}