https://medium.com/front-end-hacking/an-intro-to-ngrx-effects-ngrx-store-with-angular-4-c55c4d1d5baf
https://github.com/aravindfz/ngrx-store-demo(代码)
基于本教程,我对状态reducer需要返回感到困惑。我一直认为reducer应该是app-wide reducer来返回下一个应用程序状态。但是本教程有一个authorFilter
reducer,它返回一个用于进行过滤的状态。
// reducer: authorFilter
export const authorFilter = (state = blogs => blogs, action: any) => {
switch (action.payload && action.payload.type) {
case 'All': {
return blogs => blogs;
}
case 'Other': {
return blogs => blogs.author === action.payload.value;
}
default: {
return state;
}
}
};
当主减速器
时// reducer: blog
export const blog = (state: any = [], action) => {
switch (action.type) {
case 'ADD_BLOG_SUCCESS': {
return { data: [...state.data, action.payload] }
}
case 'LOAD_BLOGS_SUCCESS': {
return { ...state, data: action.payload }
}
case 'DELETE_BLOG_SUCCESS': {
return {
data: state.data.filter(blog => {
return blog.id !== action.payload.id;
})
};
}
default: {
return state;
}
}
};
然后在主要组件
ngOnInit() {
this.blogs$ = Observable.combineLatest(
this.store.select('blog'),
this.store.select('authorFilter'),
(blogs: any, authorFilter: any) => {
return blogs.data ? blogs.data.filter(authorFilter) : [];
}
);
this.loadBlogs();
}
ngOnChanges() {
}
loadBlogs() {
this.store.dispatch(this.blogActions.loadBlogs('All'));
}
由于在不同的reducer(blog和authorFilter)中返回不同的状态,我应该将其视为不同的商店吗?我认为状态如果应用程序状态共享相同的形状..