[Angular] NGRX 적용 - (1) ngrx 동작 과정 이해하기

** 초보 개발자로 글에 수정해야 할 부분이 있을 수 있습니다. 정정해야 할 부분은 댓글로 소통 부탁드립니다!

 

angular, react, vue 등의 SPA(Single Page Application)은 컴포넌트 간 변수 공유가 쉽지 않습니다.

(물론, 방법이 있긴 있죠 ~ 예를 들어, angular의 경우에는 @Input, @Output 을 사용하는 것 등)

그래서 react 에서는 redux 등의 방법을 사용하고 있습니다.

 

angular에도 redux와 비슷한 NGRX 가 있습니다!

그렇다면 🤗  ngrx 등이 어떻게 동작하는지 알아봅시다.

 

---

 

일반적으로 변수에 값을 할당한다면 한줄의 코드로 가능합니다.

 

const temp = 'hello, world';

 

 

하지만, ngrx의 경우에는 다음과 같은 flow가 필요합니다. (복잡하쥬... 🥲)

일단 그림의 오른쪽 검정 박스는 지우고 왼쪽부터 이해해봅시다!

store	값이 저장되는 공간(저는 세마포어 or 뮤텍스 등으로 이해하면 편하더라구요!)
state	store 안에 저장되는 값 (상태)
component	store 를 사용하는 곳
selector	("난 어떤 값을 select 하겠어!") store 에서 값을 꺼낼 때 사용하는 값
action	("난 값에 어떤 action을 취할거야!") state 의 상태를 변경하기 위해 어떠한 action을 취할 것인지 명시
reducer	action 값을 받아 그에 따른 action(state 값 변경)을 실행

 

 

그런데 값을 변경할 때, api 로부터 값을 받아와서 assign(set) 하는 경우가 있지 않습니까?

예를 들면...

 

const temp = '';

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then((response) => response.json())
  .then((data) => temp = data);

 

ngrx에서는 이런 과정을 어디에 끼워 넣을까요?

바로 위 그림에서 오른쪽 부분입니다! 

 

effects

api 호출 등 값을 전처리 하여 store에 저장하는 과정

 

 

ngrx는 위와 같은 과정을 통해 동작합니다.

다음 글에서는 실제 코드로 angular에 ngrx를 적용해보도록 하겠습니다.

 

 

---

 

 

[References]

앵귤러 프로젝트에 ngrx 도입기

NgRx 란?

[자바스크립트] fetch() 함수로 API 호출하기