ngrx 没有 return select 中的正确元素类型（对象被包装）

Question

我今天开始玩 ngrx，因为我想将它用于我们的新页面。我在设置上挣扎了很长一段时间，或者更准确地说，现在仍然是。

我现在可以将事件发送到商店并使用 select 返回获取它。但是我得到的不是正确的对象。让我展示一些代码：

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

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']"
  });

}

所以在某处我的 ngrx 代码弄乱了对象链。有人看到这里出了什么问题吗？

Answer 1

好的，原来是命名问题的配置问题。

在 app.state.ts 中，我应该引用 template 作为对模板状态的引用，如下所示：

export interface AppState {
  templateState: TemplateState;
}

并且在app.module.ts中加载的reducer的名称必须与AppState中的相同：

...
@NgModule({

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

ngrx 没有 return select 中的正确元素类型（对象被包装）

ngrx does not return the correct type of element in select (object is wrapped)

angular

redux

ngrx

ngrx-store