NGRX - Actions

안녕하세요 ! 꼬동입니다.

 

그.... 이번에 한 번 진짜 ! 각 잡고 ! NGRX 훑어보기 할려고 합니다.

 

이번엔 진심 !! 꾸준히 !! 할거야 !!

 

우선 유튜브 하나만 보고

히히

---

NGRX는 Redux 패턴의 상태관리 시스템입니다.

 

상태관리라 함은 앱의 구동에 있어서 필요한 상태를 관리하는거인데요.

 

저는 그냥 편하게 전역변수를 둔다. 로 생각을 하고 있는데,

 

전역변수는 위험하잖아여 ?

 

이걸 안전하게 전역변수로 둬보자로 쉽게쉽게 이해하고 있습니다.

NGRX

그 중 Actions에 대해서 적어보려합니다.

 

Actions은 NgRx에서 메인이 되는 시스템입니다. 유일한 이벤트를 표한하는 역할을 하고, 유저의 상호작용, 외부 네트워크 요청, 디바이스 API를 통해 Actions이 묘사되거나 사용되죠.

 

메인이 되는 Actions 이기에 Ngrx의 많은 부분에서 사용됩니다. NgRx에서 input / output이라고 생각하시면 되는데요. 이는 또 여러분이 애플리케이션을 다룰 때, 이벤트를 이해하는데 도움을 줄 수 있죠.

 

NgRx에서 액션은 간단한 interface로 만들어졌습니다.

 

interface Action {
	type: string;
}

 

해당 인터페이스는 type이라는 단일 프로퍼티를 가지고 있으며, string을 표현하고 있습니다. type 프로퍼티는 액션을 묘사하며, 애플리케이션에서 디스패치 되는 역할을 합니다.

 

그 외에도 추가적인 메타데이터를 넣을 수도 있는데요. Login 액션을 위해서 username, password를 넣을 수 있겠죠.

---

제가 이 글을 적은 하나의 이유가 되는데요.

 

어떻게 하면 좋은 actions를 만들 수 있을까 입니다.

 

몇 가지 규칙이 있는데요.

1. Upfront - 기능 개발 전에 actions을 적는게 좋은데, 이는 기능이 수행될 때의 지식과 이해도를 높여줍니다.
2. Divide - 이벤트 소스를 베이스로 하여 액션을 카테고리화 해야합니다.
3. Many - 애플리케이션의 흐름을 표현하기 위해서 많은 액션을 적는 것을 권장합니다. 액션을 만드는 데엔 공짜니까요.
4. Event-Driven - capture events는 이벤트의 설명과 이벤트의 처리를 구분하기 위한 명령이 아닙니다. (뭔 말이지?)
5. Descriptive - 개발자 도구에서 디버깅을 쉽게 할 수 있게, 디테일한 설명이 담긴 유일한 이벤트를 노리는 문맥을 제공하는 것을 권장합니다.

이러한 가이드라인을 지키고 actions을 만든다면 ! 애플리케이션에 많은 도움이 될 거에요.

---

예시를 들어봅시다.

 

import { createAction, props } from '@ngrx/store';

export const login = createAction(
	'[Login Page] Login',
	props<{ username: string; password: string }>()
);

 

createAction은 함수를 리턴하는 함수인데요, Action interface의 형태를 가진 객체가 리턴이 됩니다.

 

props 메소드는 액션을 다루는 데에 필요한 추가적인 메타데이터를 정의하는데 사용됩니다.

 

Action creator들은 순수성을 제공해주고, type safe 방법으로 디스패치를 해주죠.

 

디스패칭할 때 액션을 리턴하기 위해서, action creator를 사용해봅시다. 

 

onSubmit(username: string, password: string) {
	store.dispatch(login({ username: username, password: password }));
}

 

login action creator는 username 과 password의 객체를 받아서 순수 JS 객체를 type 프로퍼티와 username / password 메타데이터와 함께 리턴합니다.

 

리턴된 액션은 매우 상세한 정보를 담고 있는데요. 어디서 action이 왔는지, 어떤 이벤트가 일어났는지를 알 수 있습니다.

 

예시를 볼까요 ?

 

'[Login Page] Login'

• action의 카테고리는 대괄호에 넣어서 사용됩니다.
• 카테고리는 backend API / browser API / component page 중 어디서 일어난 것인지 그룹화를 지을 수 있습니다.
• 카테고리 후 Login text는 액션을 통해서 어떤 이벤트가 일어났는지 설명해줍니다. 이 경우 유저는 login button을 클릭을 했으니, username과 password와 함께 권한을 신청한 것을 알 수 있겠죠.

---

사실 Action은 간단합니다.

 

복잡한 로직 없이, 그냥 디스패치하는 이벤트를 설명하는 느낌 .. ?

 

그렇기 때문에 간단히 끝났네요.

 

이거 너무 쉬워서,,,,

 

이런걸 포스팅한다고, 나 무시당하면 어떡해

 

갓로리 ㅠㅠ

뭐 어때 !

 

이상 NGRX - Actions였습니다. ^_^