ngrx / platform

Reactive State for Angular
https://ngrx.io
Other
8.04k stars 1.98k forks source link

Store pipe typescript error warrning for the select reducer #996

Closed axmad22 closed 6 years ago

axmad22 commented 6 years ago

After updating ngrx am getting all sort of typescript errors I kind of fixed the action payload missing bug, but am having a hard time with the pipe error. I don't understand everything is working what has changed am following the example apps style pattern.

Argument type (source$: Observable<object>) => Store<string> is not assignable to parameter
type OperatorFunction<fromRoot.State, any> Checks TypeScript called function parameters,
return values , assigned expressions to be of correct type.

Am getting the error when am using it like so

 import {Observable} from 'rxjs/Observable';
 import {Store, select} from '@ngrx/store';

  loggedIn$: Observable<boolean>;
  constructor(private readonly store: Store<fromRoot.State>) {
      // the error is here
      this.loggedIn$ = this.store.pipe(select(fromAuth.getLoggedIn));  
 }
brandonroberts commented 6 years ago

Can you provide some more context? Like your package.json to see what other dependencies you upgraded.

axmad22 commented 6 years ago

this is my package.json I used angular.cli 1.7.3 to generate the code with node 9.8.0

    "@angular/animations": "^5.2.0",
    "@angular/cdk": "^5.2.4",
    "@angular/cli": "~1.7.3",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/flex-layout": "^5.0.0-beta.13",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@angular/material": "^5.2.4",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "@ngrx/core": "^1.2.0",
    "@ngrx/effects": "^5.2.0",
    "@ngrx/entity": "^5.2.0",
    "@ngrx/store": "^5.2.0",
    "@ngrx/store-devtools": "^5.2.0",
    "@ngx-translate/core": "^9.1.1",
    "@ngx-translate/http-loader": "^2.0.1",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/lodash": "^4.14.105",
    "@types/node": "~6.0.60",
    "@types/socket.io-client": "^1.4.32",
    "codelyzer": "^4.0.1",
    "core-js": "^2.4.1",
    "eslint": "^4.18.1",
    "eslint-config-airbnb": "^16.1.0",
    "hammerjs": "^2.0.8",
    "idb": "^2.1.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "ngrx-store-freeze": "^0.2.1",
    "ngx-toastr": "^8.3.0",
    "nodemon": "^1.14.11",
    "protractor": "~5.1.2",
    "rxjs": "^5.5.6",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3",
    "zone.js": "^0.8.19"

this is the code I used --Action

import {Action} from '@ngrx/store';

export enum LangActionTypes {
  SWITCH_LANGUAGE = '[Core] Switch Language'
}
export interface SwitchLanguagePayload {
  selected: string;
  dir: string;
}
export class SwitchLanguage implements Action {
  readonly type = LangActionTypes.SWITCH_LANGUAGE;
  constructor(public payload: SwitchLanguagePayload) {
  }
}
export type LangActionsUnion =
  | SwitchLanguage;

---Reducer code

import {LangActionTypes, LangActionsUnion} from '../actions/lang.action';
export interface State {
  selected: string;
  dir: string;
}
export const initialState: State = {
  selected: 'en',
  dir: 'ltr'
};

export function reducer(state = initialState, action: LangActionsUnion): State {
  switch (action.type) {
    case LangActionTypes.SWITCH_LANGUAGE: {
      const newState = action.payload;
      return newState;
    }
    default: {
      return state;
    }
  }
}
export const getSelected = (state: State) => state.selected;

---Core app state to place in the root reducer

import {createFeatureSelector, createSelector, ActionReducer, combineReducers } from '@ngrx/store';
import * as fromLang from '../reducers/lang.reducer';

export interface State {
  lang: fromLang.State;
}
const reducers = {
  lang: fromLang.reducer,
};
const reducer: ActionReducer<State> = combineReducers(reducers);
export function coreReducer(state: any, action: any) {
  return reducer(state, action);
}

export const getFeatureState = createFeatureSelector<State>('core');
export const getLangState = createSelector(getFeatureState, (state: State) => state.lang);
export const getSelectedLang = createSelector(getLangState, fromLang.getSelected);

---The root reducer

import {ActionReducerMap, ActionReducer, MetaReducer} from '@ngrx/store';
import {environment} from '../../../../environments/environment';
import {storeFreeze} from 'ngrx-store-freeze';

import * as fromAuth from './auth.state';
import * as fromCore from './core.state';

export interface State {
  auth: fromAuth.State;
  core: fromCore.State;
}
export const reducers: ActionReducerMap<State> = {
  auth: fromAuth.authReducer,
  core: fromCore.coreReducer
};

export function logger(reducer: ActionReducer<State>): ActionReducer<State> {
  return function (state: State, action: any): State {
    console.log('State: ', state);
    console.log('Action: ', action);
    return reducer(state, action);
  };
}
export const metaReducers: MetaReducer<State>[] = !environment.production ? [logger, storeFreeze] : [];
brandonroberts commented 6 years ago

I don't see anything obvious in your description. I would suggest cleaning out your node_modules first, then if you're still using @ngrx/core anywhere, you need to remove it. If you need additional support, check the gitter channel