ngrx updating state based on the angular2-router route

自作多情 提交于 2019-12-24 08:36:08

问题


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.

来源:https://stackoverflow.com/questions/41269428/ngrx-updating-state-based-on-the-angular2-router-route

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!