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.

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

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'.