[NGXS] Actions

Actions

• 어떤 일들의 트리거일 수도 있고, 이미 발생한 이벤트의 결과일 수도 있다.
• type 프로퍼티를 가지고 있다.

Internal Actions

1. @@INT - store가 초기화 되었을 때. ngxsOnInit 전에 발생
2. @@UPDATE_STATE - store에 추가된 새로운 lazy-loaded state

Simple Action

• 간단한 action 형태(동물들에게 먹이 먹이기 action)

export class FeedAnimals {
	static readonly type = '[Zoo] Feed Animals';
}

• metadata를 포함한 action

export class FeedZebra {
	static readonly type = '[Zoo] Feed Zebra';
	constructor(public name: string, public hayAmount: number){}
}

Action 이름 짓기

command

1. 이 action이 어디서부터 발생했는지 기술 → [User API]. [Product Page], [Dashboard Page]
2. 동사로 entity가 무엇을 하는지 기술
3. 우리가 action하고자하는 대상 entity표현 → User, Card, Project

ex)

• [User API] GetUser
• [Product Page] AddItemToCart
• [Dashboard Page] ArchiveProject

Event examples

이벤트는 이미 일어난 액션이다. 그리고 이벤트들에 반응해야한다.

commands와 다른 convention을 적용한다.

(주로 API 요청에 의해 발생하는 것을 의미하는 듯)

ex)

• [User API] GetUserSuccess
• [Project API] ProjectUpdateFailed
• [User Details Page] PasswordChanged
• [Project Stars Component] StarsUpadted

1. 액션들을 재사용하지 마라
2. Action type을 설명하듯이 사용하라
3. subtyping을 피해라
4. 간결성에 초점을 맞춰라
5. 액션을 먼저 작성해라

출처: Good Action Hygiene with ngrx

Group your actions

액션을 Group지을 때는 접미사를 사용하지말고 namespace를 사용하라

export namespace Todo {
  export class Add {
    static readonly type = '[Todo] Add';
    constructor(public payload: any) {}
  }

  export class Edit {
    static readonly type = '[Todo] Edit';
    constructor(public payload: any) {}
  }

  export class FetchAll {
    static readonly type = '[Todo] Fetch All';
  }

  export class Delete {
    static readonly type = '[Todo] Delete';
    constructor(public id: number) {}
  }
}

출처 : NGXS 공식문서