Set default state value in ngrx reducer

Question

In store I have several array, string etc.

export const INITIAL_TEST_STORE: TestState = {
    one: null,
    two: null,
    three: false,
    four: {},
};

And above, you can see initial state values - all are working properly.

But when I dispatched clear action (and setting initial state):

on(clearState, state => ({
    ...INITIAL_TEST_STORE
})),

the four node has still old value, not empty {}

If I dispatch below action:

on(clearState, state => ({
    ...INITIAL_TEST_STORE,
    four: {}
})),
    

Everything is clear properly. And I am wondering why? The problem is with immutable? But... it is that same...

Answer 1

Spread operator does the Shallow copy of the object, four is the nested level object and spread operator will not reset it.

on(clearState, state => ({
    ...INITIAL_TEST_STORE
    four: { ...INITIAL_TEST_STORE.four }
})),

snippet about should reset the state.