Angular ngrx 사용 방법

1. npm install

npm install @ngrx/store-devtools —save

npm install @ngrx/store —save

npm install @ngrx/effects —save

 

버전 문제가 있어 6버전으로 다시 설치함.

버전을 지정하고 싶으면

npm install @ngrx/store@6

 

2. app.modules.ts에 ngrx import문 추가

import {EffectsModule} from '@ngrx/effects';
import {StoreModule} from '@ngrx/store';
import {StoreDevtoolsModule} from '@ngrx/store-devtools';

 

3. Store 구조 생성

 

4. store 정보를 app.modules.ts에 정의해야함.

@NgModule({
    imports:[
        ...생략
        StoreModule.forRoot(reducers),
        EffectsModule.forRoot([TopicEffects]),
        StoreDevtoolsModule.instrument({
          maxAge: 25
        })
    ],
    declarations: [
        ...생략
    ],
    bootstrap:    [ AppComponent ]
})

export class AppModule { }

reducer 정보는 StoreModule을 임포트 할 때, effect정보는 EffectModule을 임포트 할 때 정의한다. 

 

이 때, reducer가 여러개면 배열로 정의해야 한다. 

StoreModule.forRoot([reducer1, reducer2])

따라서 reducer를 따로 관리하도록 함.

 

 

5. app.states.ts에서 리듀서를 관리하기 위한 상수 선언

export const reducers = {
	categoryTopic : topic.reducer
}

 

 

6. Action 생성

Reducer를 통해 Store에 저장할 값을 변경시키거나 Effect를 호출하기 위한 진입점을 정의하기 위함. 

import {Action} from '@ngrx/store'

export enum TopicActionTypes{
  LOAD = '[TOPIC] All CategoryTopic Load',
  CATEGORY_TAB_CLICK = '[TOPIC] Category Tab Click',
  CATEGORY_TOPICS_GETTER = '[TOPIC] Get CategoryTopics'

}

export class Load implements Action{
  readonly type = TopicActionTypes.LOAD
  constructor(public payload: any){}
}

export class CategoryTopicsGetter implements Action{
  readonly type = TopicActionTypes.CATEGORY_TOPICS_GETTER
}

export type ALL =
  | Load
  | CategoryTopicsGetter

 

이 진입점을 호출하기 위해서는 다음과 같은 코드 실행

this.store.dispatch(new CategoryTopicsGetter());

 

 

7. Effect, Reducer 정의

@Injectable()
export class TopicEffects{
  constructor(
    private actions: Actions
    ,private topicService: TopicService
){}

@Effect()
GetCategoryTopics: Observable<Action> = this.actions.pipe(
    ofType(TopicActionTypes.CATEGORY_TOPICS_GETTER),
    map((action: Load) => action.payload),
    switchMap(payload => {
    	return this.topicService.getCategoryTopics().pipe(
    map((categoryTopicList) => {
   	 	return new Load(categoryTopicList);
    }));
  }));
}

import { ALL, TopicActionTypes } from "../actions/topic.actions";

export function reducer([], action: ALL): any {
  switch (action.type) {
    case TopicActionTypes.LOAD: {
   	 return action.payload;
    }
    default: {
   	 return [];
    }
  }
}

 

 

8. 스토어에 저장된 내용을 보기 위해선 다음과 같이 사용한다.

this.store.select('categoryTopic').subscribe(categories=>{
  if(that.categories.length==0){
  	that.categories = categories;
  }
})