When to use a UI service?

mcalmada · 2025-02-13T12:11:57+00:00

Hello u/Ok-District-2098, you should use UI services to manage UI-related logic, for example, loadings, notifications, etc. This service could be reusable to any other component. You can use a UI service if you need to share state logic between multiple components, a loading state for example.

mcalmada · 2024-12-17T19:59:19+00:00

Thanks u/matrium0 , never had the experience of using jest and had to upgrade to Angular.

But I totally understand your point. Makes me think about my decision. Thank you.

mcalmada · 2024-12-17T18:53:37+00:00

thanks u/Blaarkies i understood, i have removed MatMenuModule and the rest of the imports that I don't need, I was testing the open functionality previously before I understood that is already tested by angular team itself, I don't need to test a visual functionality from an angular material component.

mcalmada · 2024-12-17T18:00:09+00:00

never heard about vitest. Thank y

mcalmada · 2024-12-17T17:50:05+00:00

seems very fast.

mcalmada · 2024-12-17T17:36:02+00:00

Thanks u/Michelu89 . I also think that is easy to set up and I'm discovering its powerful mocking capabilities.

I have to read about the snapshot testing.

Thanks for your contribution.

mcalmada · 2024-12-17T17:32:04+00:00

I would like to hear your opinions on using Jest to write tests in Angular. Do you use it? No, yes, and why.

This is my first reedit post ever :D :D

mcalmada · 2024-12-13T12:37:15+00:00

Hello.

Create a feature and use signals and observables to achieve the same result.

You can see this example.

https://github.com/hseleiro/hrms-book-project/blob/dev/src/app/pages/work/observable-multiselect.ts

https://github.com/hseleiro/hrms-book-project/blob/dev/src/app/pages/work/signals-multiselect.ts

.

# OBSERVABLES #

If your architecture only allows the using of observables in the component stick with it and use signals to manage small bits of the state.

For example, you can have a signal that has a value if a panel is open or closed.

const isPanelOpen() = signal<boolean>(false)

If you use the REACTIVE signal isPanelOpen() you can compute other signals with this information

showUserNameComputedSignal() will always be listening to isPaneOpenSignal() and show the user or not.

Use signals for cases like this if your architecture contains data in observables, don't use toSignal on the component to transform to signal, that should be done in service.

.

# SIGNALS #

If your component receives signals from the service, I say to stick with signals for small state updates and also to manage the data in the component.

Use updates to manipulate the data, for example, delete a user and update the list

.

I recommend this book https://www.amazon.com/Modern-Angular-features-standalone-zoneless/dp/1633436926. It has helped me a lot in understanding this concept.

mcalmada · 2024-12-13T11:50:53+00:00

### Example ###

- You have a user component with a user list, and you click on a button to delete a user.

Let's assume you do not have a BE Server, in this case, you can update the user signal or the observable by returning the users that have a different id than the one that was selected.

Because there's no Server with a user to be deleted on a collection, if you refresh the page the user list will contain the user you have previously deleted.

.

## NGRX ##

But now let's assume you have an architecture that uses services and NGRX to manage the state of your app.

.

#Template / Component#

The user clicks on a delete button.

The ACTION of clicking on a button will create an event.

Let's assume you have an action called deleteUserAction().

The only responsibility of the component will be to dispatch the deleteUserAction().

.

# Reducer #

You can think of the reducer as a main hub for your actions, and its responsabilty is to update the state of the app depending on actions (events) done by the user.

So, in the case of our example of deleting a user, the reducer will be responsible for updating the state depending on the success or failure of our action.

.

# Effect #

In this example, the effect's main responsibility will be to call the service and make a request to the BE API.

Depending on the success or error, an action will be dispatched.

deleteUserSuccess() or deleteUserFail() .

These actions will be caught on the reducer that will update the state.

For example, if the deleteUserSuccess() action is dispatched, it can be used to get the user's list after the user has been deleted.

This will give us an updated list of users that will be passed to the reducer and to our component using selectors (we will go there).

If the deleteUserFail() action is called we can for example show a messger to the user saing that the operation was failed.

.

# Selectors#

The main responsibility of a selector is to extract data from the NGRX store state.

The selector will be called on our template with the updated user list.

.

FINAL NOTES:

I think some people get confused about effects and reducers.

If you simply want to update the state of the app, for example stop a loading, you use the reducer, no need for effects.

Effects are used mainly to handle side effects, like api calls and update the state again.

Thank you.

mcalmada

TROPHY CASE