What does state management (e.g ngrx/store) bring to Angular2+?

Question

For the past two hours I've been reading here and there on state management (e.g Redux and Vuex). What I still don't get is what it brings to e.g Angular (though it is the same for Vue since it has two-way binding).

From what I've gathered, state management would place states and data in a single place (the store). From there, every component would look into this store to find the data it wants, according to its state.

I've only done simple SPA in Angular2+. What I usually do is communicate the data throught @Input() and @Output() with double-binding in the template. The user gives us e.g a number, this number is updated in the component and thsi component while notify its children throught the sub-@Input() and notify its ancestor by sending an event containing the number. All my components then have the same data. I could also use services to have singletons.

What would be the advantage of using redux (or @ngrx/store in my case) over what I've been doing all along? Is it only because it prevents (or tries to) spaghetti-code? Am I misunderstanding things? I've seen some examples yet does not see the benefits and shortcomings.

Thanks!

Answer 1

actually it has multiple advantages.

• clean code: one would be as you said, preventing spaghetti-code and bringing a level of cleanness to your code.

• reusability: another one is that it eliminates the need to always have the data needed by a child component inside it's parent component, and hence, your components will be more reusable. imagine all your components get their state data via @Input properties. in that case, the placement of your component inside the application's structure tree would be important and you should always have them in a parent that has access to that specific state data. but when you place all your state inside such a service as ngrx's store, you can use said component in every place inside your app and not worry about it's access to state data.

• immutability: another advantage is state's immutability. this is a very important one and can have multiple usecases. for one, imagine two different parents pass the same state data to two different children. when the children change the data, you might end up having two different versions of state. which is very troubling and can eventually break your app's logical integrity. to solve this, you have to implement a system that queues all the state changes and also tells other components that use the state about all the previous changes in it. which is what redux and on top of that, ngrx store does for you in a very neat way.

• predictability: by pre-defining all the actions that change state of the application, you're actually eliminating any unpredicted, unwanted, and untraceable occurrences in the app. every changes to the application's state will only be via one of the actions that you've defined before. and that's very useful in case of dissolving strange functionalities and debugging the application.

• tools: as you've probably read, there are many tools like Ngrx DevTools that have amazing features which help you in tracing and debugging of your app when using ngrx store.

you can check multiple articles written on this subject by searching. like this article , this question, this video ...

Answer 2

Ngrx gives you:

• A way to manage your state in a predictable fashion
• Easy to debug code
• Manipulating complex async code through the ngrx/effects

Traditional static generated pages are probably not a good use for ngrx. Ngrx will shine where you have a very complex SPA.

In a very complex SPA you have a lot of state:

• Server state gets copied down to the client. The client and server will need to be synced in some way.
• The client state will keep it stored in memory and might be stored in localstorage and/or indexeddb. Another syncing problem.
• You have the same state located in multiple places in your code producing an inconsistent UI. For example you have a chat window that says one new message but when you click on it there is no new message.
• The router url is state

In a complex SPA you have many ways to modify the state:

• User clicks a button
• User clicks a link to navigate to a new url
• User clicks a button that causes an api call to happen and then at some future point updates the state
• Websockets updating your state

Therefore in a complex application we need a way to make all of this very predictable. Let's impose the following constraints:

• We cannot directly modify the state we have to dispatch an action with a payload to do it.
• Only one thing can update our state at a time.
• Our state is immutable.
• We avoid local state as much as we can

Once I do that I can take advantage of redux devtools and see how the state updates one action at a time. Here are the main benefits:

• I see a clear log of all the actions and how they modified the state
• I can replay all the actions and see the UI update accordingly
• If a bug happens I can narrow down which action caused it. I can also look a previous actions to see if they contributed to the bug.

Hopefully the above helps explain how you can make your code more bugfree. In addition to that you will see that ngrx will enforce a strict architecture on your code. This is good if you work in a large team and you can all follow the same architecture.

Finally ngrx/effects gives us a way to handle all our async code using rxjs operators.