DEV Community

Cover image for Redux with Observable Stores in Angular

Redux with Observable Stores in Angular

Stephen Belovarich on May 02, 2019

It's turning out that 2019 is the year of the Observable store at ng-conf with several speakers advocating for this pattern in Angular apps. I rec...
Collapse
 
steveblue profile image
Stephen Belovarich

Yes, this is a good call and how I actually implemented it. I think I used this.state merely as a clear example in the write up.

Collapse
 
aziziyazit profile image
Azizi Yazit

I've used Observable.store in 2 in my freelance projects. Really love the simplicity it offered.

Collapse
 
rconr007 profile image
rconr007

This is some good stuff. Thanks for this insight. I have implemented a simple store with BehaviorSubject before. But your implementation is such more clearer and cleaner. Thanks again for the post.

Collapse
 
webmarket7 profile image
Oleksandr Ryzhyk

Great article! I love the simplicity of this approach. But I wonder, why you used EventEmitter for emitting new actions instead of Subject? AFAIK usage of EventEmitter is discouraged by Angular team for anything except sharing events between components. Was there some good reason to use EventEmitter specifically in this case? Thank you!

Collapse
 
steveblue profile image
Stephen Belovarich

It’s been awhile since I looked at this but I think the rationale was exactly that, for sharing. If Subject works for you, go for it!

Collapse
 
christhebutcher profile image
ChrisTheButcher

Great read, thanks. I've never been a fan of ngrx and I've worked with BehaviourSubjects before as well. A very nice way of implementing this pattern.

Collapse
 
crh225 profile image
Chris House

Do you have a git repo with this example?

Collapse
 
dddsuzuki profile image
dddsuzuki

Hello.
I love this great article.
But, I got a question.

When should I use state?

get state(): AbstractState {
return this._state$.getValue();
}

Template should not consume store.state?

Collapse
 
steveblue profile image
Stephen Belovarich

In this simple expression of an Observable store you can do something like this in a template.

{{ (store.state$ | async).chunk }}

Collapse
 
johntday profile image
John T Day

I've missed something. what is AbstractAction ?

Collapse
 
steveblue profile image
Stephen Belovarich

AbstractAction is a placeholder interface for actions, which you can override with another interface that more clearly defines the action in any class that extends the Store class.