In my store, I have a simplified state tree structure:
{
routerReducer: {
state: {
url: '/blog'
},
queryParams: {
category: 'home'
}
params: { }
},
blog: {
posts: {
entities: { ... }
loading: false,
loaded: false,
pagination: {
sort: 'date',
filters: {
category: 'home',
tag: 'testTag'
},
page: 1
}
}
}
}
Essentially, I want to pass the router state down to the blog state for pagination purposes, but only if the current URL belongs to that module. The pagination for the blog -> posts state will be dependent on the URL parameters already defined in the state. It might not be the most conventional approach as it may lead to multiple sources of truth, but I intend to use this pagination state to define the entities in my store. This means that if I move pages or change filters, I will clear all entities and refresh with paginated content from the API.
Here is the flow I have in mind:
Router navigation event e.g. /blog/2 (page 2 via queryParam)
Router action is dispatched and handled by the router reducer to update that part of the state tree
Side effect triggered on router navigation event, checking if the URL matches the blog module e.g. "/blog/*" (which might contain URL parameters like ?category=home), then composing our local pagination state in the blog state tree, and finally dispatching a loadPosts action based on that state
What do you think of this flow? Is this the correct approach to achieve what I'm aiming for?