CODEWITHSUNDEEP
angularngrx-store
LoshoToshi
LoshoToshi

Reputation: 15

NgRx select arguments are incompatible

i`m having a problem with selecting from NgRx store. This is my reducer:

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);
}

Simple actions file:

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 };

And selectors file:

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;
    }
}

I see the state is refreshed in the redux dev tool, but trying to subscribe to store give me error:

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

This is the error:

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

I am using the same pattern with my authState and its working correct.

Upvotes: 0

Views: 772

Answers (2)

vp001
vp001

Reputation: 46

When you inject the store in the component, it needs to be injected with the global state, not the feature state:

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

Upvotes: 3

David Kidwell
David Kidwell

Reputation: 720

You don't need the pipe operator,

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

Upvotes: 0

Related Questions