NgRx 란?

NgRx 구조. 우측에 옅게 칠한 부분은 확장개념이기 때문에 일단은 신경쓰지 말자.

NgRx : Angular 에서 Reactive한 Application을 만들기 위해 사용하는 프레임워크. 프레임워크 안의 프레임워크.

Flux 패턴에서 영감을 받아 만들어서 그런지,  똑닮았다. 

Dispatcher ≈ Reducer
View ≈ Component

이런 느낌

아래 글을 읽고 보면 좋다. 조회수를 올리려는 졸렬한 수작이 맞다.

https://pcconsoleoraksil.tistory.com/305

Flux 패턴

Action : 지정된 행동의 단위.

Reducer : 호출된 action에 따라 'Reducer 에게' 지정된 행동을 하고 Store 의 상태를 업데이트한다. 

Store : 상태와 값을 가지는 저장소. 그 스스로는 어떠한 동작도 하지 않으며, 그 변경은 오직 Reducer 통해서만 이루어진다.

Component: 일반적인 뷰. ( Angular 컴포넌트)

하얗게 칠해진 부분은 Store 이용에 필수적인 부분이 아니므로 일단 생략

 

app.module.ts

 

Store는 Module에 !!!

Reducer 와 Action 은 편한 곳에 설정하면 된다.

Reduceer와 Action의 생성 방법은 아래 링크에 가 보면 매우 자세히 설명되어 있다. 복붙하면 된다. 

대개 Component에서 Action 을 dispatch 하고, Reducer는 넘겨받은 action에 따라 Store를 업데이트 하게 된다.

 

 

 

 

 

요런 느낌이다.

Component는 Reducer에 Action을 넘겨주고, Reducer는 넘겨받은 Action에 따라 Store를 업데이트한다.

 

---

아직 Select에 대해 설명하지 않은 이유는 Store의 사용에 필수적인 부분은 아니기 때문이다.

단, 실제 사용시에는 무조건 사용할 것이다. Store에 저장한 값을 받아오는 역할을 하기 때문이다. 

위 Module에 Store를 설정하는 부분.

실제 action 이 dispatch 될 때의 reducer가 store를 업데이트 하는 모습. Redux DevTool 을 통해 확인 가능하다.

이렇게 Store 에 저장된 count 의 값을 불러올 수 있다.

---

 

Effect 역시도 app.modules.ts 에 추가되어야 한다. Store가 우선적으로 import되어 있어야 한다.

Component -> Effect -> Reducer

컴포넌트는 Effect를 호출할 때 Action을 인자로 넘긴다. 

Effect는 Reducer와 유사하게 인자로 받은 Action에 해당하는 동작서비스 호출 등을 하고 다시 action을 리턴한다. 즉, Reducer를 호출한다.

Component(pass Action) -> Effect(return Action) -> Reducer 

 

ngrx-test.zip

0.30MB

NgRx 를 적용한 my-counter 튜토리얼이다. 

도움이 되기를 빈다.

---

아래 링크에서 튜토리얼을 볼 수 있다. stackblitz 까지 제공한다. 근데 나는 예제가 제대로 표기되질 않는다. 내 소스 봐라 하하하.

https://ngrx.io/guide/store

NgRx Docs