当前位置:主页 > 资料 >

Querying a Normalized State with RxJS in Angular
栏目分类:资料   发布日期:2017-05-28   浏览次数:

导读:本文为去找网小编(www.7zhao.net)为您推荐的Querying a Normalized State with RxJS in Angular,希望对您有所帮助,谢谢! This post assumes that you at least have some working knowledge of ngrx/store and RxJS. In this ar

本文为去找网小编(www.7zhao.net)为您推荐的Querying a Normalized State with RxJS in Angular,希望对您有所帮助,谢谢!

去找(www.7zhao.net欢迎您



This post assumes that you at least have some working knowledge of ngrx/store and RxJS.

本文来自去找www.7zhao.net

In this article, we are going to learn how we can query normalized state in our redux store. www.7zhao.net

Let’s say we have a blog and our normalized state look like this:

欢迎访问www.7zhao.net

First let’s create our smart component. 去找(www.7zhao.net欢迎您

I’m going to abstract the queries to a dedicated service for three reasons:

内容来自www.7zhao.net

  1. I do not like the idea of injecting the Store into my component. The component does not need to know how he gets the data. ( For the same reason that you do not inject the HTTP service. )
  2. I want the ability to reuse my queries in any other parts of my application.
  3. I want to keep my component clean.

Now let’s create the PostsQuery . 欢迎访问www.7zhao.net

First, we need to create a dedicated selector for every part of the state so that we can compose them later.

本文来自去找www.7zhao.net

Now let’s say we have a place in the app that needs only the articles.

内容来自www.7zhao.net

The result and articles depend on each other ( if we add new article we need to update both the result and the articles ), so our best choice is to use the operator. 欢迎访问www.7zhao.net

After all observables emit, emit values as an array www.7zhao.net

We can also use the second parameter — resultSelector . A function which takes the inputs at the specified index and combines them together.

内容来自www.7zhao.net

combineLatest will also work but I prefer zip in this case.

去找(www.7zhao.net欢迎您

Now let’s say we need the articles with their comments . www.7zhao.net

Do you see where I’m going with this? We can compose queries to get the necessary data.

去找(www.7zhao.net欢迎您

Now let’s say we need the articles with their comments and the authors . 欢迎访问www.7zhao.net

Now let’s add a selectedArticle key to our state. 欢迎访问www.7zhao.net

If we want to display the selected article we can use the operator.

本文来自去找www.7zhao.net

Also provide the last value from another observable

内容来自www.7zhao.net

When the selectedArticle changes our observable emits new value with the latest articles and our component will re-render.

本文来自去找www.7zhao.net

If we need only the article without any other data we can do this: 欢迎访问www.7zhao.net

The Router params are also observable so for example, if we store the selected id in the URL we can query the article like this: 本文来自去找www.7zhao.net

The valueChanges is also observable, so for example if we need to implement search we can do this like this:

欢迎访问www.7zhao.net

Let’s say you need to get the favorite articles of a user, and this information is stored in a user reducer. copyright www.7zhao.net

In the end, you have to remember that everything is a stream . You can use various observables/operators to compose data from your state or any other source.

去找(www.7zhao.net欢迎您

, , , , , and more… copyright www.7zhao.net

Follow me on or to read more about Angular, Vue and JS!

内容来自www.7zhao.net

内容来自www.7zhao.net


本文原文地址:https://netbasal.com/querying-a-normalized-state-with-rxjs-in-angular-71ecd7ca25b4?gi=9511dc4f7977

以上为Querying a Normalized State with RxJS in Angular文章的全部内容,若您也有好的文章,欢迎与我们分享!

内容来自www.7zhao.net

Copyright ©2008-2017去找网版权所有   皖ICP备12002049号-2 皖公网安备 34088102000435号   关于我们|联系我们| 免责声明|友情链接|网站地图|手机版