Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

馃殌[FEATURE]: Lazy load sub states #2029

Open
vmuresanu opened this issue Jun 23, 2023 · 3 comments
Open

馃殌[FEATURE]: Lazy load sub states #2029

vmuresanu opened this issue Jun 23, 2023 · 3 comments

Comments

@vmuresanu
Copy link

vmuresanu commented Jun 23, 2023

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

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
Copy link
Member

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
Copy link
Author

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

@jase88
Copy link

jase88 commented Mar 21, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants