Cover Image for Use withResource to seamlessly combine Resources with Ngrx Signals Store!
ANGULAR SNIPPETS

Use withResource to seamlessly combine Resources with Ngrx Signals Store!

•
2 min read
#angular

Angular applications often need to fetch data from APIs, and managing the state of that data – including loading and error states – can sometimes feel like a repetitive task. If you're using Ngrx Signals Store, there's a neat solution in the "Ngrx Toolkit" package called withResource that streamlines this process beautifully.

What is withResource?

withResource is a function designed to integrate an "Angular resource" (think of it as a function that fetches data, often from a service) directly into your Ngrx Signals Store. This allows you to centralize your data fetching logic and its corresponding state (the actual data, whether it's loading, and any errors) right within your store.

How it Works

The magic of withResource comes from its reactive nature. You define your resources within the withResource call, passing in any necessary signals as parameters. For example, you might define a products resource that depends on a filters signal from your store:

// Your Ngrx Signal Store
withResource((store) => ({
    products: store.productsApi.productsResource(store.filters),
    // ... other resources
})),

The key benefit here is that whenever store.filters updates, the products resource automatically re-fetches its data. This creates a very clean, reactive data flow without needing explicit effects for re-fetching.

withResource then exposes three signals for each defined resource directly on your store:

  • store.resourceNameValue(): The fetched data itself.
  • store.resourceNameIsLoading(): A boolean signal indicating if the resource is currently fetching data.
  • store.resourceNameError(): A signal containing any error that occurred during fetching.

Why is this useful?

This approach offers several advantages:

  • Automatic Reactivity: Data re-fetches automatically when its signal dependencies change, simplifying complex data flows.
  • Centralized State: All aspects of your fetched data – the data itself, loading status, and errors – are managed within a single, consistent place: your Ngrx Signals Store.
  • Clean Template Integration: You can easily bind to the resource signals directly in your templates, making UI updates for loading states and error messages incredibly straightforward.

Using it in your Templates

Accessing these signals in your component templates is intuitive and aligns perfectly with Angular's signal-based reactivity:

// Use in your template
@for (product of store.productsValue(); track product.id) {
   <app-product-card [product]="product" />
}

@if (store.productsIsLoading()) {
  <p>Loading products...</p>
}

@if (store.productsError()) {
  <p>Error: {{ store.productsError()?.message }}</p>
}

This completes the reactive loop, ensuring your UI always reflects the current state of your resources with minimal boilerplate. It truly feels like a natural extension for managing external data within a Signals Store setup.

You may also like...