7

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.

Ritesh Waghela
  • 3,474
  • 2
  • 19
  • 25
  • When an action is dispatched, it is passed to every reducer. So, no, you cannot have multiple actions with the same name. – cartant Jun 11 '17 at 06:50
  • @cartant - 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. – Ritesh Waghela Jun 11 '17 at 07:03
  • 2
    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](https://github.com/ngrx/example-app/blob/master/src/app/actions/book.ts#L4-L7). – cartant Jun 11 '17 at 07:08
  • 1
    A pretty clean explanation by the devs behid ngrx/store during ng-conf: https://www.youtube.com/watch?v=cyaAhXHhxgk – Jota.Toledo Jun 11 '17 at 08:55

2 Answers2

6

A picture is worth a thousand words...

enter image description here

enter image description here

Source: Building a Redux Application with Angular2

Example Code: ngrx-todo-app

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

Michael Kang
  • 52,003
  • 16
  • 103
  • 135
  • 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*](https://github.com/ngrx/effects/blob/v2.0.3/src/actions.ts#L12-L15) the dispatcher and independently of the reducer's action subscription. – cartant Jun 12 '17 at 08:32
  • 2
    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. – Michael Kang Jun 12 '17 at 08:40
  • Aha.. Loved this diagram. Everything is clear now. :) – Ritesh Waghela Jun 12 '17 at 13:54
  • What is *MiddleWares* in the above moving diagram? I don't see any explanation in ngrx docs. Is it same as effects? – GSangram Jul 26 '20 at 05:24
3

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

seescode
  • 2,101
  • 15
  • 31