Search code examples
ngxs

Change detection for nested objects in a state

Let say we have a state with the following structure : 

@State<StateModel>({
name: 'pg',
defaults: {
    docs: {
        doc1: { 
            id: 'doc1', 
            content: 'foo', 
        }
        doc2: { 
            id: 'doc2', 
            content: 'bar' 
        }
    }
}

How is change detection working ? If I do the change

@Action(UpdateContent)
update(ctx: StateContext<StateModel>) {
    ctx.patchState( { docs.doc2.content: 'something else' } );
}

None of the following observable emit a value : 

obs1$ = store.select( state => state.docs );
obs2$ = store.select( state => state.docs.docs2 );
obs2$ = store.select( state => state.docs.docs2.content );

I am not an expert in rxjs programming but it seems strange, any ideas ?

Solution

    1. Try adding state name pg like this obs1$ = store.select( state => state.pg.docs ) instead.

    2. The state name is not required if you are selecting via @Selector().

    3. I assume your patchState() code's object notation is just an example.