CODEWITHSUNDEEP
typescriptngxs
Optiq
Optiq

Reputation: 3182

What are the mechanics of the type syntax used in the actions?

I've been studying into NGXS for the past 2 days and am having a hard time understanding exactly what's happening in examples like this

//snippet from the actions chapter
export class FeedAnimals {
  static readonly type = '[Zoo] Feed Animals';
}

//snippet from the state chapter
export class FeedAnimals {
  static readonly type = '[Zoo] FeedAnimals';
}

The fact that [Zoo] is inside of [] tells me it's clearly targeting the Zoo state, but the Feed Animals and FeedAnimals part is confusing me because I can't see how, why or if they're different from one another. They both make sense in terms of how we normally access things, but the fact that there's 3 things in the first one and just 2 in the 2nd one makes me wonder if there's some underlying order we need to follow or if everything that comes after the [] automatically get mashed into one string anyways which means there's only 2 things being passed in with both instances.

I learned about making our own custom types in typescript but have mainly used interfaces and classes so from my current understanding of creating a single type I really have no clue as to what's being done by doing this because I've only seen examples of custom types applying custom interfaces or a primitive type. The documentation also starts off talking about all these cool things you can do to/with your state through actions then doubles back and briefly shows us what a state looks like then jumps right back into actions and selectors which made me personally have to stop and re-sort everything I was learning to make it make some degree of sense. Every example I come across seems to assume the user already understands what's being done and doesn't talk about it. What is this doing and what are these things being passed in?

Upvotes: 0

Views: 48

Answers (1)

Garth Mason
Garth Mason

Reputation: 8001

It's not nearly as complex as you are expecting..

The type for each action just needs to be a unique string so NGXS can figure out which state(s) and action streams need to respond when the action is dispatched.

The [Zoo] Feed Animals syntax is just convention - you can annotate your Actions with any pattern that suits you as long as each one is unique. You don't have to have the [..] as a prefix.

E.g on my current project we usually preface the action with the context from where we dispatch it like [Left Panel] Select Farm or [Map] Select Farm. So different actions, but the name indicates clearly where they originated.

This makes it simpler for the developers to trace in the NGXS logger / Redux tooling as we can see where the action was dispatched from.

The [Zoo] .. prefix here is not that useful (to me) as an action may impact multiple states rather than just target one (it's ok for a simple demo app of course).

Upvotes: 1

Related Questions