NgRx选择参数不兼容



我在从NgRx存储中进行选择时遇到问题。这是我的减速器:

import { createReducer, on, Action } from "@ngrx/store";
import * as SharedActions from './shared.actions';
export const featureKey = 'shared';
export interface SharedState {
filter: {
price: {
from: number | null,
to: number | null
}
}
}
const initialState: SharedState = {
filter: {
price: {
from: null,
to: null
}
}
}
const _sharedReducer = createReducer(
initialState,
on(SharedActions.filter_success, (state, action) => {
const filter = state.filter;
return {
...state,
filter: {
...filter,
price: {
from: action.from,
to: action.to
}
}
}
})
)
export function sharedReducer<ActionReducer>(state: SharedState | undefined, action: Action): SharedState {
return _sharedReducer(state, action);
}

简单操作文件:

import { createAction, props } from '@ngrx/store';
export const filterSuccess = '[Shared] Filter Success';
export const filter_success = createAction(filterSuccess, props<filterStart>());
export type filterStart = { from: number, to: number };

和选择器文件:

import { createFeatureSelector, createSelector } from "@ngrx/store";
import { AppState } from "../app-state.interface";
import { SharedState, featureKey } from "./shared.reducer";

export const selectFeature = createFeatureSelector<AppState, SharedState>(featureKey);
export const selectFilter = createSelector(
selectFeature,
(state: SharedState) => <IFilter | null>state.filter
);
export interface IFilter {
price: {
from: number;
to: number;
}
}

我看到redux-dev工具中刷新了状态,但尝试订阅存储时出错:

filter$: Observable<IFilter | null> = this.store.pipe(select(sharedSelectors.selectFilter));

这就是错误:

Argument of type '(source$: Observable<AppState>) => Observable<IFilter | null>' is not assignable to parameter of type 'OperatorFunction<object, IFilter | null>'.
Types of parameters 'source$' and 'source' are incompatible.
Type 'Observable<object>' is not assignable to type 'Observable<AppState>'.
Type '{}' is missing the following properties from type 'AppState': auth, shared

我在authState中使用了相同的模式,它的工作是正确的。

在组件中注入存储时,需要注入全局状态,而不是特性状态:

constructor(private store: Store<AppState>) {}

您不需要管道操作员

filter$: Observable<IFilter | null> = this.store.select(sharedSelectors.selectFilter);

最新更新