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?
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).