How to Properly Use a Service to Lock the Screen with NgRx Signals? Is effect in Hooks the...

I’m working with NgRx Signals and trying to figure out the best way to utilize a ScreenLockService to lock/unlock the screen during specific operations. Below is my current setup using signalStore and a service for managing the screen lock:

export const BookStore = signalStore(
withState(initialStore),
withMethods((store,
restService = inject(RestService)) => ({
openModal: rxMethod<string>(
pipe(
tap(() => patchState(store, { isLoading: true })),
switchMap((id) => {
return from(restService.backendRestClient.getBook(id)).pipe(
tapResponse({
next: (books) => patchState(store, { books }),
error: (err) => patchState(store, { error: err }),
finalize: () => patchState(store, { isLoading: false })
})
);
})
)
),
})),
withHooks((store) => {
const screenLockService = inject(ScreenLockService);

return {
onInit() {
effect(() => {
if (store.isLoading()) {
screenLockService.lock();
} else {
screenLockService.unlock();
}
});
},
};
})
);

My Questions:


Is using effect inside withHooks the correct approach for invoking screenLockService.lock() and unlock()? Could there be a better way to handle this scenario, perhaps without coupling screen locking directly to the store state?

What I’m Considering: Using the Store Outside of Hooks:

Should I move the screen lock logic to another service and subscribe to the store state changes there? Alternative Patterns:

Could there be a more declarative or centralized way to manage side effects like screen locking when using signalStore? Looking for insights or recommendations from the community!

Continue reading...