ngrx updating state based on the angular2-router route

333 views Asked by At

So, continuing working on the redux-based Angular2 app with REST server. In the app I have the following reducers:

  1. AuthReducer -> AuthState
  2. UserReducer -> UserState
  3. UserListReducer -> UserListState
  4. ArticleReducer -> ArticleState
  5. 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.

  1. My ArticleListComponent on that page dispatches CREATE_ARTICLE action to the store ------- ( how does the store know which list state to update? )
  2. ArticleListReducer processes that action
  3. @Effect takes place sends data to the backend
  4. CREATE_ARTICLE_SUCCESS is invoked and processed via ArticleListReducer
  5. Article is created ?successfully. It's in the list and displayed on the page.

Now, two questions:

  1. Would such application structure be fine in general?
  2. 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.

0

There are 0 answers