1

I've inherited an Angular codebase that contains all the latest tricks and techniques, and I'm having trouble understanding some key things. Normally when I inherit a codebase in any language, I find that I can search it for terms used in one place to see how they are implemented in others and gradually come to an understanding. This doesn't seem to work with NgRx Actions, however. I don't understand the point of code such as

const LOAD = '[Trailer Info Specifics] Load All ';
const load = createAction(LOAD);
export const TrailerInfoActions= {
  load
}

When I search the codebase for "Trailer Info Specifics," it only appears in this one file. So what is the point of the name of the action? What digests this information and acts upon it? I've tried watching videos about Angular Reducers/Actions/Effects/Facades and my eyes just glaze over. None of this makes any sense. I come from the world of imperative programming, so I understand there is a learning curve, but this is just so confusing and none of the tutorials I've found are any good. I'm hoping someone can point me in the right direction.

Gus Mueller
  • 185
  • 10
  • 1
    In your codebase you should search for "TrailerInfoActions" exported by this file: this should be imported in some other file where the action "load" needs to be dispatched. It is normal that the action type "Trailer Info Specifics" can be found only in this file. – Sergio Rinaudo Nov 11 '21 at 15:02
  • thanks for that. where if anywhere would "Trailer Info Specifics" be called then? i'm still not clear on what function this string performs. – Gus Mueller Nov 11 '21 at 15:06
  • In NgRx an action is something like an event, it can be dispatched by the store, eg. this.store.dispatch(fromAction.TrailerInfoActions.load({ someProp: someValue })) When an action is dispatched you can have an "effect" that runs ( and make, for example, an http request to do something ) and you can also have a "on" in your reducer that modify your state, eg. on(fromAction.TrailerInfoActions.load, (state, { somePropIfDefinedInTheAction }) => ({ ...state, loadInProgress: true, loadDone: false })), – Sergio Rinaudo Nov 11 '21 at 15:13
  • I'm still not clear on what (if anything) '[Trailer Info Specifics] Load All ' actually does or how it knows to load all the TrailerInforSpecifics. and where does the standard of having super-readable [whatever '[Trailer Info Specifics] Load All ' is called], that is, as a string with spaces in it. i cannot find this information anywhere. tutorials always assume i "get" something about this that i do not get and have been unable to learn. – Gus Mueller Nov 11 '21 at 17:35
  • the following explanation is helpful, though i'm still not clear what the point of the "type" passed into createAction is when it's never referred to by the code.... https://medium.com/@JimLynchCodes/understanding-the-syntax-for-ngrx-action-types-ad84db279c0e – Gus Mueller Nov 11 '21 at 17:49

1 Answers1

2

The type is the only thing that is required to create and send (store.dispatch) an action. Based on the type, reducers and effects know what to do. They receive all dispatched actions and filter based on this type (that's why it's important to keep action types unique).

It's recommended to follow the "Good Action Hygiene" pattern when declaring types. The template of a type is [Source] Event, this makes it easier to debug/get to know the application because you can see where the action is dispatched.

The reason why you can't find more references of the type is because we don't want magic strings in an application (these are brittle). Instead, you can look for TrailerInfoActions.load to know where the action is dispatched and which reducers/effects do something with it. (The type is a static property on the action creator, which is used to filter actions in reducers/effects.)

timdeschryver
  • 14,415
  • 1
  • 19
  • 32
  • once i realized the Type string can be ANYTHING and wasn't actually parsed (except to perhaps produce a lookup hash), that cleared up my confusion. i then tried to create another action with the same Type to see if the compiler would flag it, and it didn't, which makes the whole convention seem even more pointless than it already did, though i'm probably still missing some essential bit of wisdom – Gus Mueller Nov 12 '21 at 16:14
  • 1
    You can configure NgRx to catch duplicated action types - https://ngrx.io/guide/store/configuration/runtime-checks#strictactiontypeuniqueness – timdeschryver Nov 12 '21 at 17:44