Angular, Central (Redux) "Store" vs Singleton Service, aka "what's up with separation of concerns"?
As we prepare for our new Angular project, we are evaluating various architectural concepts for use in our system - especially for government. In the past, there were natural complications when client components were pre-notified. Introduce reactive programming and central repositories today.
I understand the nature of maintaining a "large" central store with appropriate actions (within various services), reducers and subscribers that contain state for the entire application. I can also see the benefits of stratifying unit tests with these pure reducers. The question I have is how does this fit in with the classic notions of "separation of concerns" and "single responsibility" where state is maintained for these components through their dedicated services (nested dependency) while decoupling visibility is also provided ?
Why use large central repositories instead of single-user services that maintain "containing" state, which emits changes to subscribers, and maintains separation of concerns (for example: client data is separated from inventory data). While there are hints of this in other parts of SO and on the internet, I don't see any links directly addressing this issue. We mentally evaluate these two concepts (central repository state and nested dependency service state / single state) and / or links.
source to share
This is definitely a good start on your Angular journey to ask yourself such questions about project architecture.
With AngularJs (v1.x) I really didn't know which is the best sample to work in reactive mode, and make sure all components can subscribe to data somewhere in the service, and if another component called service to update some data, other components will be updated. Then I tried several solutions and ended up adding RxJs
to my project. It was probably overkill as I didn’t know about strong supermoder and I didn’t use any operator at all, I just signed up. RxJs
6 ~ 8 months ago I discovered Redux
and found this approach very interesting. I decided to dig more into this idea of a centralized repository with pure functions and immutable data. It was one of the best choices as a web developer I have done . You can use it Redux
outside of any structure. Therefore, even if I need to do an example with JQuery
and save quite a lot of data, I use Redux
.
I really like Redux
: normalizing my data and manipulating it like a database where a reducer manipulates the table for example. " Computed view " using is also a powerful way to compose your data, how you want, tables. " selectors
The question I have is how does this fit in with the classic notions of "separation of concerns" and "single responsibility" where state is maintained for these components via their dedicated services (nested dependency) while decoupling visibility is provided as well ?
Well, as you noted ngrx
, I can imagine you are planning on using it with Angular (v2 or +) and the separation of concern is great. You have stripped your logic using Reducer to manage tables, but what about making ajax calls for example? For these kind of side effects, you should use ngrx / effects . This way you will still have your services + reducers. Effects
will allow you to respond to dispatch for a given action.
For example, if you send action
with a type FETCH_USER
, in your reducer, you just switch the boolean isFetchingUser
to true (so you can display the counter in your view, perhaps). Then from user.effect.ts
(which is a service) you can catch the action FETCH_USER
and call your server. After receiving the response, release the activity FETCH_USER_SUCCESS
and pass the data from the ajax call to the activity payload
.
If you want to take a look at some code, I created a demo on Github called Pizza-Sync . It uses @ngrx/store
and @ngrx/effects
with normalized data.
If you have Chrome or the Firefox Redux devtools extension, you can look into the store and steps.
Hope this helps, let me know if you have any further questions.
source to share