//FILE=counter.actions.ts
//estilo redux e vuex
import { Action } from "@ngrx/store";
import { CounterActionEnum } from "../enums/counter-action.enum";

export class Increment implements Action {
  readonly type: string = CounterActionEnum.Increment
}

export class Decrement implements Action {
  readonly type: string = CounterActionEnum.Decrement
}

//FILE=counter-action.enum.ts
export enum CounterActionEnum {
  Increment = 'Increment',
  Decrement = 'Decrement'
}

//FILE=counter.reducer.ts
//estilo redux e vuex
import { Action } from "@ngrx/store";
import { CounterActionEnum } from "../enums/counter-action.enum";

const INITIAL_STATE = {
  counter: 0
}

export const reducer = (state = INITIAL_STATE, action: Action) => {

  switch(action.type) {
    case CounterActionEnum.Decrement:
      return {...state, counter: state.counter - 1 }
    case CounterActionEnum.Increment:
      return {...state, counter: state.counter + 1 }
    default:
      return state;
  }
}

//FILE=app.module.ts
import { StoreModule } from '@ngrx/store';
import {reducer as counterReducer } from './store/reducers/counter.reducer';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    StoreModule.forRoot({
      counter: counterReducer
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

//FILE=app.component.ts
import { Store } from '@ngrx/store';
import { Increment, Decrement } from './store/actions/counter.actions';

export class AppComponent implements OnInit {

  count$!: Observable<any>;

  constructor(private store: Store<{counter: number}>) {}

  ngOnInit(): void {
    this.count$ = this.store.select('counter')
  }

  increment() {
    this.store.dispatch(new Increment());
  }

  decrement() {
    this.store.dispatch(new Decrement());
  }
}

//FILE=app.component.html
<section>
  <span>Counter {{(count$ | async).counter}}</span>
  <br />
  <div>
    <button (click)="increment()">increment</button>
    <button (click)="decrement()">decrement</button>
  </div>
</section>

/* REFATORANDO PARA PADRÃO ngrx/store */
//FILE=counter.actions.ts
import { createAction } from "@ngrx/store";
import { CounterActionEnum } from "../enums/counter-action.enum";

export const increment = createAction(
  CounterActionEnum.Increment
)

export const decrement = createAction(
  CounterActionEnum.Decrement
)

//FILE=counter-action.enum.ts
export enum CounterActionEnum {
  Increment = 'Increment',
  Decrement = 'Decrement'
}

//FILE=counter.reducer.ts
import { createReducer, on } from "@ngrx/store";
import { decrement, increment } from "../actions/counter.actions";

const INITIAL_STATE = 0;

export const reducer = createReducer(
  INITIAL_STATE,
  on(increment, state => state + 1),
  on(decrement, state => state - 1)
)

//FILE=app.module.ts
import { StoreModule } from '@ngrx/store';
import {reducer as counterReducer } from './store/reducers/counter.reducer';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    StoreModule.forRoot({
      counter: counterReducer
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

//FILE=app.component.ts
import { Store } from '@ngrx/store';
import { increment, decrement } from './store/actions/counter.actions';

export class AppComponent implements OnInit {

  count$!: Observable<number>;

  constructor(private store: Store<{counter: number}>) {}

  ngOnInit(): void {
    this.count$ = this.store.select('counter')
  }

  increment() {
    this.store.dispatch(increment());
  }

  decrement() {
    this.store.dispatch(decrement());
  }
}

//FILE=app.component.html
<section>
  <span>Counter {{count$ | async}}</span>
  <br />
  <div>
    <button (click)="increment()">increment</button>
    <button (click)="decrement()">decrement</button>
  </div>
</section>