splincode

import { HmrInitAction, HmrBeforeDestroyAction } from '@ngxs/hmr-plugin';

@State({ ... })
export class MyState {
  @Action(HmrInitAction)
  public hmrInit(ctx: StateContext, { payload }) {
    ctx.setState({ ... })
  }

  @Action(HmrBeforeDestroyAction)

splincode

@State<AnimalsStateModel>({
    name: 'animals',
    defaults: {
        zebra: {
            food: [],
            name: 'zebra'
        },
        panda: {
            food: [],
            name: 'panda'

splincode

const fiz = { foo: 'bar' };
const baz = fiz;

baz.foo = 'qux'; // mutate field 'foo'

// because the references are equal

console.log(baz.foo); // qux
console.log(fiz.foo); // qux

splincode

/* 

  You have to understand that each object 
  has a unique identity in JavaScript
  
  console.log(new Object() === new Object()); 
  
*/

console.log({} === {}); // false

splincode

@Component({
  selector: 'my-app',
  template: `
    <b>default</b>: {{ todos$ | async | json }} <br>
    <b>mutable reverse</b>: {{ mutableTodos$ | async | json }} <br>
    <b>immutable reverse</b>: {{ immutableTodos$ | async | json }} <br>
  `
})
export class AppComponent  {

splincode

@State<number[]>({
  name: 'todos',
  defaults: [1, 2, 3]
})
export class AppState {

  @Selector() public static mutableTodos(state: number[]): number[] {
    return state.reverse();
  }

splincode

<b>default</b>: {{ todos$ | async | json }} <br>
<b>immutable reverse</b>: {{ immutableTodos$ | async | json }} <br>
<b>mutable reverse</b>: {{ mutableTodos$ | async | json }} <br>

splincode

@NgModule({
  imports: [
    BrowserModule,
    NgxsModule.forRoot([ AppState ], { developmentMode: !env.production })
  ],
  ...
})
export class AppModule { }

splincode

const animals = {
  zebra: {
    food: ['leaves', 'bark'],
    name: 'zebra'
  },
  panda: {
    food: [],
    name: 'panda'
  }
};

splincode

/*
   INCORRECT CHANGES (deep mutation)
*/

const animals = {
  zebra: {
    food: ['leaves', 'bark'],
    name: 'zebra'
  },
  panda: {