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

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在select中没有返回正确的元素类型（对象被包装）

1 个答案: