(common) lazyloading 구조에 맞게 ngrx store 구조 리팩토링

[cjd1110]

현재 상황

• 개별 모듈에 StoreModule.forRoot()가 존재한다.

분석 상황

• StoreModule.forRoot() 는 app.module.ts에 존재하여야 하고, 각각의 모듈에는 StoreModule.forFeature() 가 존재하여야 한다.

해결 후 결과

• [ ] StoreModule.forRoot()는 app.module.ts에 위치 하여야 한다.
• [ ] StoreModule.forFeature()는 개별.module.ts에 위치 하여야 한다.
• [ ] 기존에 작성한 코드를 구조에 맞게 리팩토링 한다.

[cjd1110]

기획중인 디렉토리 구조

[cjd1110]

• forRoot 를 사용하여 전체 응용 프로그램에 대한 하나의 상태
• forFeatrue를 사용하여 상태를 모듈로 분리

[cjd1110]

@ngrx/schematic를 활용하여 ngrx store 기능을 구현한다.

테스트

실행 명령어

$ ng generate store State --root --module app.module.ts

결과

실행 명령어

$ ng generate effect Post --root --module app.module.ts

결과

실행 명령어

$ ng generate entity Post --root reducers/index.ts -m app.module.ts

결과

[cjd1110]

rxjs 공부 후 시작 예정

[cjd1110]

ngxs vs ngrx?

출처 : https://www.reddit.com/r/Angular2/comments/8x71fk/ngrx_or_ngxs/ https://blog.singular.uk/why-i-prefer-ngxs-over-ngrx-df727cd868b5

계획: rxjs 공부가 마무리 되는 시점에 ngrx 또는 ngxs를 사용예정 더 많은 정보 조사를 하여 프로젝트를 개발 및 유지보수하는데 더 편리한 라이브러리를 사용할 예정

의견: 아직 더 많은 정보를 조사해야 되는데 코딩을 더 angular 스럽게 작성할 수 있는 ngxs가 끌리긴하다..

[cjd1110]

ngxs 공식 Angular sample 코드 - Angular lazyLoading 에 맞게 짜여져 있음 https://github.com/ngxs/store/tree/master/integration/app

[cjd1110]

ngxs 사용 결정

• ngxs store 설치

  $ npm install @ngxs/store --save

• ngxs cli 설치

  $ sudo npm install @ngxs/cli -g