时间戳

首页 > 解决方案 > NgRx 选择器正在返回 Store 对象

angular - NgRx 选择器正在返回 Store 对象

问题描述

我正在尝试将 NgRx 与我的 Angular 应用程序集成，但遇到了一些麻烦。我已经定义了一个动作、reducer 和 selector，但我没有得到我期望的数据。

我定义了一个动作getReceipts：

// file-state.actions.ts

export const getReceipts = createAction(
  '[Receipt] Get receipt',
  (receipts: Receipt[]) => ({ receipts })
);

一个 reducer receiptReducer，应该由getReceipts操作调用：

// file-state.reducers.ts

const initialState: ReadonlyArray<Receipt> = [
  {merchant_name: 'default'}
];

export const receiptReducer = createReducer(
  initialState,
  on(ReceiptActions.getReceipts, (state, { receipts }) => [...receipts]),
)

还有一个从商店获取数据的选择器：

// file-state.selector.ts

export const selectReceipts = createSelector(
  (state: AppState) => state.receipts,
  (receipts: Receipt[]) => receipts
);

最后在我的 Angular 组件中：

export class ViewFilesComponent implements OnInit {
  // receipts$: Observable<Receipt[]>;

  constructor(private store: Store<AppState>) {
    console.log(this.store.pipe(select(selectReceipts)))
    console.log(this.store.dispatch(getReceipts([])))
  }

  ngOnInit(): void {}

}

调度返回一个未定义的对象，这很好，因为一个动作返回 void。所以我想我需要调用selectReceipts选择器，但这会返回 Store 对象：

在此处输入图像描述

标签： angularngrx

解决方案

我在下面的建议是，我不会使用操作来获取应用程序状态的一部分，在您的组件中，您可以使用 store.select 给出的 observable，将 reducer 作为参数传递。

例如，当您需要进行 http 调用时，您应该使用操作。状态也应该是一个简单的对象。

由于我的应用程序由多个功能模块组成，因此我通常使用 injectionTokens 来获取组件内部的 reducer，在本示例中我跳过了该部分。

文件：存储/reducer/index.reducer.ts

export interface State {
  receipts: Array<Receipt>
}

export const initialState: State = {
  receipts: []
}

const reducerDefinition = createReducer(
  initialState,
  on(fromAction.someAction, (state, { someValue}) => ({
    ...state, 
    someProp: someValue
  }))
)

export function reducer(state, action) {
  return reducerDefinition(state, action)
}

export const getReceipts = (state: State) => state.receipts

在您的组件中，您可以订阅 getReceipts$ observable

this.getReceipts$ = this.store.select(getReceipts)

推荐阅读