I have a reducer that holds blog posts of various types. I'm using select to fetch part of the data that I need, yet every time the state change reselect recalculates all the selectors.
initialstate = {
blogPosts: { byId: { 1: { id: 1, parent: null } }, ids: [1] },
commentPosts: { byId: { 2: { id: 2, parent: 1 } }, ids: [2] },
filter:{ selectedBlog: null }
};
const reducer = (state = initialstate, action) => {
if (action.type == 'filter') {
return object.assign(state, { filter: action.filter });
}
return state;
}
const Blogselector = state => state.posts.blogPosts
const Commentselector = state => state.posts.commentPosts
const getFilters = state => state.posts.filter;
In my component when I'm showing blog posts, I dispatch action that set filter.selectedBlog = post.id
The problem is when the filter changes, the whole Posts branch of state changes too as I'm returning a new copy. So any selector I will write will end up recalculating everything every time a filter changes.
What are the standard practice for creating a filtering state selectors ?