So, continuing working on the redux-based Angular2 app with REST server. In the app I have the following reducers:
- AuthReducer -> AuthState
- UserReducer -> UserState
- UserListReducer -> UserListState
- ArticleReducer -> ArticleState
- ArticleListReducer -> ArticleListState
The app uses many of those reducers in multiple places (i.e. pages/routes). The app state itself is composed the following way (app routes are in the comments):
export interface AppState
{
localUser: AuthState
//homePage with random article (/)
homeArticle: ArticleState
//profilePage (/profile)
profileInfo: UserState // (profile/info)
profileArticles: ArticleListState // (profile/articles)
favouriteArticles: ArticleListState // (profile/favourite)
subscribers: UserListState // (profile/subscribers)
//userPage (when local user navigates to article's publisher's profile)
// (/user/:id)
userInfo: UserState // (/user/:id/info)
userArticles: ArticleListState // (/user/:id/articles)
userSubscribers: UserListState // (/user/:id/subscribers)
//feedPage (/feed)
feed: ArticleListState
//.....
}
So, basically, if I need (in theory) to cache and retrieve the whole app State, information from all pages will be recovered.
So, let's consider the following scenario as an example: I am on the profile/articles page as an authenticated user. I want to create a new article.
- My ArticleListComponent on that page dispatches CREATE_ARTICLE action to the store ------- ( how does the store know which list state to update? )
- ArticleListReducer processes that action
- @Effect takes place sends data to the backend
- CREATE_ARTICLE_SUCCESS is invoked and processed via ArticleListReducer
- Article is created ?successfully. It's in the list and displayed on the page.
Now, two questions:
- Would such application structure be fine in general?
- How do I properly update the appropriate state?
EDIT
I'm just guessing it could be somehow managed conditionally depending on the current route. But not sure whether it is the solution.