ngx selector not queying data - ngrx-store

Question

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: 'john.doe#gmail.com',
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?

Answer 1

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
)