ngrx : how the reducers function are invoked, when it is invoked?

Question

I am trying my hands on ngrx library for managing the state of my application. I have gone through many ngrx documents and git pages. I understand that there are three important concept:

1. Store
2. Reducer and
3. Action

Store is the single source of data for our application. So any modification or retrieval of data is done through Actions. My question here is what exactly happens when an action is dispatched to the store? How does it know which reducers is to be invoked? Does it parses all the reducers registered to the store? There can be multiple actions with the same name in that case what happens?

Thanks in advance.

Mccann

When an action is dispatched, it is passed to every reducer. So, no, you cannot have multiple actions with the same name. – Eth

@Eth - How ngrx then force users to not have actions with same name? In a big app there can be hundreds of action and there is a possibility of action name clash. – Mccann

It's up to you to make sure your actions have distinct types. If you want, scope them as is done in the the example app. – Eth

A pretty clean explanation by the devs behid ngrx/store during ng-conf: youtube.com/watch?v=cyaAhXHhxgk – Birdsong

Answer 1

A picture is worth a thousand words...

Source: Building a Redux Application with Angular2

Example Code: ngrx-todo-app

Demo: Todo App using @ngrx/store and @ngrx/effects

Declared

That picture is a little misleading. It seems to suggest that middleware has some control over the actions passed to the reducer. I don't believe that's the case. My understanding is that effects are the middleware in ngrx and they are wired up after the dispatcher and independently of the reducer's action subscription. – Eth

middleware (effects) communicates with an API and produces an action. the action is passed to the reducer, combined with the current state, to produce the next state. The state is emitted to the view. I believe that the picture is accurate. – Declared

Aha.. Loved this diagram. Everything is clear now. :) – Mccann

What is MiddleWares in the above moving diagram? I don't see any explanation in ngrx docs. Is it same as effects? – Nicolis

Answer 2

My question here is what exactly happens when an action is dispatched to the store? All of the registered reducers get a chance to handle the action

How does it know which reducers is to be invoked? All of the registered reducers get invoked. Try putting console.logs into all the reducers and you can see for yourself.

Does it parses all the reducers registered to the store? Yes

There can be multiple actions with the same name in that case what happens? If you have multiple actions with the same name they would be treated the same. For example if I dispatched type "ADD" with payload 3 and then dispatched a different action called type "ADD" with payload 3 it would be the same thing.

Ngrx isn't that smart. Let's say we have the following reducers:

const reducers = { blog: BlogReducer, post: PostReducer, comment: CommentReducer }

Say I dispatch 'ADD_COMMENT'. Basically BlogReducer will first try to handle it, followed by PostReducer, and finally by CommentReducer. The ordering is determined by how you specified the reducers object above. So if I did this:

const reducers = { comment: CommentReducer, blog: BlogReducer, post: PostReducer }

CommentReducer would be the first one to try and handle the 'ADD_COMMENT'.

Freedafreedman