CODEWITHSUNDEEP
ngrx-storengrx-reducersngrx-selectors
Navigator
Navigator

Reputation: 3111

ngx selector not queying data

I have this

reducer.ts

export const userFeatureKey = 'user';

export interface UserState {
  selectedUser: User | null,
  users: User[],
  isLoading?: boolean;
  error?: any;
}

export const initialState: UserState = {
  selectedUser: null,
  users: [],
  isLoading: false,
  error: null
};

export const reducer = createReducer(
  initialState,
  on(loadUsers, (state) => ({...state, isLoading: true})),
  on(loadUsersSuccess, (state, {data: users}) => ({...state, users, isLoading: false})),
  on(loadUsersFailure, (state, error) => ({...state, error: error, isLoading: false})),
  on(saveUserFailureAction, (state, error) => ({...state, isLoading: false, error: error})),
  on(saveUserSuccessAction, (state, {data: user}) => ({
      ...state,
      isLoading: false,
      selectedUser: user,
      users: [...state.users, user]
    })
  ),
);

index.ts to register all reducers

import {ActionReducerMap, MetaReducer} from '@ngrx/store';
import {environment} from '../../environments/environment';
import * as fromUser from '../module/users/store/user.reducer';


export interface State {
  [fromUser.userFeatureKey]: fromUser.UserState;
}

export const reducers: ActionReducerMap<State> = {
  [fromUser.userFeatureKey]: fromUser.reducer
};


export const metaReducers: MetaReducer<State>[] = !environment.production ? [] : [];

app.module.ts

StoreModule.forRoot(reducers, {metaReducers}),

selector.ts

import {createSelector} from '@ngrx/store';
import {UserState} from "./user.reducer";

export const userSelector = createSelector(
  (state: UserState) => state.users,
  (users) => users
)

In my component user.component.ts

constructor(private store: Store<UserState>) {
    this.store.dispatch(loadUsers());
  }

ngOnInit(): void {
    this.store.pipe(select(userSelector)).subscribe(a => {
      console.log("Found " + a);
    });
}

redux state

{
  user: {
    selectedUser: null,
    users: [
    
      {
        id: 3,
        email: '[email protected]',
        username: 'john.doe',
        firstName: 'fsadfad',
        middleName: 'sadf',
        lastName: 'werew',
        accountNonExpired: false,
        accountNonLocked: false,
        credentialsNonExpired: false,
        enabled: true,
        verified: false,
        description: 'fsdfas',
        phone: '0716650714',
        lastLogin: null,
        fullName: 'Fsadfad sadf werew'
      },
      {
        id: 21,
        email: 'erwer',
        username: 'sdfsd',
        firstName: 'rewrew',
        middleName: 'sadfa',
        lastName: 'sdfsa',
        accountNonExpired: false,
        accountNonLocked: false,
        credentialsNonExpired: false,
        enabled: true,
        verified: false,
        description: 'sdfds',
        phone: 'werw',
        lastLogin: null,
        fullName: 'Rewrew sadfa sdfsa'
      }
    ],
    isLoading: false,
    error: null
  }
}

But I get no data from the selector. Can someone help?

Upvotes: 0

Views: 64

Answers (1)

Navigator
Navigator

Reputation: 3111

Solved the problem. the problem was i needed to create feature selector first

export const selectUserFeature = createFeatureSelector<UserState>(userFeatureKey);

Then my selector.ts becomes

import {createFeatureSelector, createSelector} from '@ngrx/store';
import {userFeatureKey, UserState} from "./user.reducer";

export const selectUserFeature = createFeatureSelector<UserState>(userFeatureKey);
export const userSelector = createSelector(
  selectUserFeature,
  (state) => state.users
)
export const userIsLoadingSelector = createSelector(
  selectUserFeature,
  (isLoading) => isLoading
)

Upvotes: 0

Related Questions