🚀[FEATURE]: Lazy load sub states

[vmuresanu]

Description

Add possibility to lazy load sub states

Describe the problem you are trying to solve

Currently when having a parent state, in order to load sub state to it we need to provide in @State's config the children array of the desired child state.

@State<LeadStateModel>({
  name: 'leadState',
  defaults: {
    leads: [],
    leadStatuses: [],
    selectedLead: null,
    isEditMode: false,
    isNoElementsLeft: false,
    filters: defaultFilters,
  },
  children: [NoteState, TaskState],
})
@Injectable()
export class LeadState {
...

While this works, we are eagerly load NoteState and TaskState, and if we open the devTools we can see the following structure:

However, say if we want NoteState to be lazily loaded when user visit /notes page, it is not possible with current approach. Because the way we can lazy load a state is:

  {
    path: 'notes',
    loadComponent: () => import('../notes/notes.component').then(c => c.NotesComponent),
    providers: [importProvidersFrom(NgxsModule.forFeature([NoteState]))],
  },

By doing this, notes state will appear as a sibling of leadsState (assuming we have removed them from LeadState children array.)

Describe the solution you'd like

Somehow to specify Lazily which is the parent state of the SubState. One possible solution would be:

  {
    path: 'notes',
    loadComponent: () => import('../notes/notes.component').then(c => c.NotesComponent),
    providers: [importProvidersFrom(NgxsModule.forFeature([NoteState], { parentState: LeadsState }))],
  },

In the end, only when accessing /notes path, noteState should appear as a child state of leadState

leadState: {
   leads: [...],
   ...
   noteState: {
        notes: [...],
   }
}

[arturovt]

We're planning to drop sub states support in the future thus no more work is going to be done on their extensibility for now.

[vmuresanu]

Mind if I ask you the reason for such a decision? Will there be an alternative way to structure states by logic?

[jase88]

If there is a plan to drop sub states in the long term, then it would be good to see a note in the documentation that sub states are deprecated. The reasons are of course still important to communicate

[arturovt]

The sub state is being deprecated. Please refer to the documentation in version 18 for more details (https://www.ngxs.io/deprecations/sub-states-deprecation).