ngrx가 select에서 올바른 유형의 요소를 반환하지 않습니다 (객체가 래핑 됨)

Question

오늘 ngrx로 시작한 것은 새 페이지에 사용하기 때문입니다. 나는 좀 더 정확하게하기 위해서, 셋업으로 꽤 오래 동안 고생했다.

이제 저장소에 이벤트를 보내고 선택 백 아웃을 사용하여 가져올 수 있습니다. 하지만 내가 꺼내는 것은 올바른 대상이 아닙니다. 내가 몇 가지 코드 보여주지 :

이 app.module.ts

... 
@NgModule({ 

    imports: [ 
    StoreModule.forRoot({ 
     template: templateReducer 
    }) 
    ] 

app.state.ts

export interface AppState { 
    template: Pages; 
} 

template.actions.ts을

export interface TemplateState { 
    template: Pages; 
} 

const initialState: TemplateState = { 
    template: null 
}; 

export function templateReducer(state = initialState, action: TemplateActions): TemplateState { 

    switch (action.type) { 

    case TemplateActionTypes.ADD_FULL_TEMPLATE: { 
     return Object.assign({}, { template: action.payload as Pages }); 
    } 

    default: return state; 
    } 
} 

template.actions.ts

export const TemplateActionTypes = { 
    ADD_FULL_TEMPLATE: '[Store] Add template' 
} 

export class AddFullTemplateAction implements Action { 
    type = TemplateActionTypes.ADD_FULL_TEMPLATE; 
    constructor(public payload: Pages) { 
    } 
} 

page.component.ts 그래서 어딘가에 라인 오브젝트 체인을 망쳐 놨 ngrx 내 코드를 함께

constructor(private store: Store<AppState>) { 
    this.store.dispatch(new AddFullTemplateAction(['1', '2']) 
} 

ngOnInit() { 

    this.store.select((store) => store.template).subscribe((data) => { 
    console.log(data); // gives "{ template: ['1','2'] }" 
    console.log(data.template); // already forbidden by typescript because data is of type Pages which is an array 
    console.log((data as any).template); // gives my desired output "['1', '2']" 
    }); 

} 

. 아무도 여기서 무엇이 잘못되는지 보지 않습니까?

Answer 1

그래, 이름 지정 문제로 인해 구성 문제가 발생했습니다.

export interface AppState { 
    templateState: TemplateState; 
} 

과 app.module.ts로드 감속기의 이름으로 : 에서

내가이 같은 템플릿 상태에 대한 참조로 template를 참조해야 app.state.ts 그것은해야하지,

... 
@NgModule({ 

imports: [ 
    StoreModule.forRoot({ 
    templateState: templateReducer 
    }) 
]