REPO: https://github.com/morningharwood/platform/tree/feature/ngrx-firebase
When I try to subscribe to my selectAll of my post ngrx entity feature I get the error:
Cannot read property of map of undefined
It has to be a simple typo I'm following tutorials verbatim.
Weird part is if I use string selector:
this.selected$ = this.store.select('post');
this.selected$.subscribe(console.log); // no error here.
I get a no error.
Question:
When using ngrx entity, How can I get my selectAll
selector to log out the all posts from ngrx store collection post
?
My post.reducer.ts
import {
PostActions,
PostActionTypes,
} from './post.actions';
import {
ActionReducerMap,
createFeatureSelector,
} from '@ngrx/store';
import {
createEntityAdapter,
EntityState,
} from '@ngrx/entity';
import { Post } from './post.interfaces';
export const postAdapter = createEntityAdapter<Post>();
export interface PostState extends EntityState<Post> {}
export const postInitialState: PostState = {
ids: [ '1234' ],
entities: {
'1234': {
id: '1234',
header: {
title: 'title 1',
subtitle: 'subtitle 1',
},
body: {
sections: [],
},
},
},
};
export const initialState: PostState = postAdapter.getInitialState(postInitialState);
export function postReducer(state: PostState = initialState, action: PostActions): PostState {
switch (action.type) {
case PostActionTypes.ADD_ONE:
return postAdapter.addOne(action.post, state);
default:
return state;
}
}
export const getPostState = createFeatureSelector<PostState>('post');
export const {
selectIds,
selectEntities,
selectAll: selectAllPosts,
selectTotal,
} = postAdapter.getSelectors(getPostState);
export const postReducersMap: ActionReducerMap<any> = {
post: postReducer,
};
And app.component
:
import {
Component,
OnInit,
} from '@angular/core';
import { AppState } from './app.interfaces';
import { Store } from '@ngrx/store';
import { selectAllPosts } from './post/post.reducer';
import { Observable } from 'rxjs/Observable';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ],
})
export class AppComponent implements OnInit {
public selected$: Observable<any>;
constructor(private store: Store<AppState>) {
}
ngOnInit() {
this.selected$ = this.store.select(selectAllPosts);
this.selected$.subscribe(console.log); // error here
}
}
My forFeature
and forRoot
modules:
@NgModule({
imports: [
BrowserModule.withServerTransition({ appId: 'portfolio-app' }),
StoreModule.forRoot({ reducers }),
EffectsModule.forRoot([]),
PostModule,
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ],
providers: [],
})
export class AppModule {
}
import { StoreModule } from '@ngrx/store';
import { postReducers } from './post.reducer';
@NgModule({
exports: [],
declarations: [],
imports: [StoreModule.forFeature('post', postReducersMap)],
})
export class PostModule {
}
It was the creation of the ActionMapReducer
in the forFeature('post', postReducerMap);
I still need to figure out how to use entity and ActionMapReducer together.