Skip to main content

​
Overview

ngrx-rtk-query provides two store configuration options:
  • provideStoreApi: Full NgRx Store integration with Redux DevTools support
  • provideNoopStoreApi: Lightweight standalone mode without NgRx dependency
Choose the right provider based on your application’s architecture and requirements.

​
provideStoreApi (NgRx Store)

Use provideStoreApi when your application already uses NgRx Store or you want full Redux DevTools integration.

​
When to Use

  • Your application already uses @ngrx/store
  • You want Redux DevTools for debugging
  • You need to integrate with existing NgRx state management
  • You want to combine RTK Query with NgRx actions and effects

​
Installation

1

Install dependencies

npm install ngrx-rtk-query @reduxjs/toolkit @ngrx/store
2

Configure providers

Add the store providers to your application configuration:
app.config.ts
import { ApplicationConfig, isDevMode } from '@angular/core';
import { provideStore } from '@ngrx/store';
import { provideStoreDevtools } from '@ngrx/store-devtools';
import { provideStoreApi } from 'ngrx-rtk-query';
import { postsApi } from './posts/api';

export const appConfig: ApplicationConfig = {
  providers: [
    provideStore(),
    provideStoreDevtools({
      name: 'RTK Query App',
      logOnly: !isDevMode(),
    }),
    provideStoreApi(postsApi),
  ],
};
3

Use in components

import { useGetPostsQuery } from './posts/api';

@Component({
  template: `
    @if (postsQuery.isLoading()) {
      <p>Loading...</p>
    }
    @if (postsQuery.data(); as posts) {
      @for (post of posts; track post.id) {
        <div>{{ post.name }}</div>
      }
    }
  `,
})
export class PostsComponent {
  postsQuery = useGetPostsQuery();
}

​
Configuration Options

provideStoreApi(api, options);
OptionTypeDefaultDescription
setupListenersboolean | SetupListenersOptionstrueConfigure automatic refetching behavior
The setupListeners option controls automatic refetch on focus and reconnect events. Set to false to disable.

​
Redux DevTools Integration

With provideStoreApi, your RTK Query state is visible in Redux DevTools:
  • View cached query data under the reducerPath key
  • Track query lifecycle actions
  • Time-travel debugging
  • Action history

​
provideNoopStoreApi (Standalone)

Use provideNoopStoreApi for a lightweight implementation without NgRx Store dependency.

​
When to Use

  • You don’t want to add NgRx Store as a dependency
  • Building a new application without existing NgRx state
  • You want minimal bundle size
  • Redux DevTools are not required

​
Installation

1

Install dependencies

npm install ngrx-rtk-query @reduxjs/toolkit
No @ngrx/store dependency required!
2

Configure providers

app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideNoopStoreApi } from 'ngrx-rtk-query/noop-store';
import { postsApi } from './posts/api';

export const appConfig: ApplicationConfig = {
  providers: [
    provideNoopStoreApi(postsApi),
  ],
};
3

Use in components

The component code is identical to the NgRx Store version:
import { useGetPostsQuery } from './posts/api';

@Component({
  template: `
    @if (postsQuery.isLoading()) {
      <p>Loading...</p>
    }
    @if (postsQuery.data(); as posts) {
      @for (post of posts; track post.id) {
        <div>{{ post.name }}</div>
      }
    }
  `,
})
export class PostsComponent {
  postsQuery = useGetPostsQuery();
}

​
Configuration Options

provideNoopStoreApi(api, options);
OptionTypeDefaultDescription
setupListenersboolean | SetupListenersOptionstrueConfigure automatic refetching behavior

​
Internal Implementation

The noop store uses Angular signals internally:
  • Lightweight signal-based state management
  • No Redux store overhead
  • Same API surface as NgRx Store version
  • Full reactivity with fine-grained change detection

​
Comparison

FeatureprovideStoreApiprovideNoopStoreApi
Redux DevTools✅ Yes❌ No
Bundle SizeLarger (+@ngrx/store)Smaller
Dependencies@ngrx/store requiredNo @ngrx/store
IntegrationWorks with NgRx ecosystemStandalone
API SurfaceIdenticalIdentical
PerformanceExcellentExcellent

​
Multiple APIs

You can register multiple APIs with either provider: 
import { provideStoreApi } from 'ngrx-rtk-query';
import { postsApi } from './posts/api';
import { usersApi } from './users/api';

export const appConfig: ApplicationConfig = {
  providers: [
    provideStore(),
    provideStoreApi(postsApi),
    provideStoreApi(usersApi),
  ],
};
Each API must have a unique reducerPath to avoid conflicts.

​
Setup Listeners

Both providers support the setupListeners option: 
// Disable automatic refetch on focus/reconnect
provideStoreApi(postsApi, { setupListeners: false });

// Or with custom options
provideStoreApi(postsApi, {
  setupListeners: {
    onFocus: () => true,
    onReconnect: () => true,
    onOnline: () => false,
  },
});
When setupListeners is disabled, queries won’t automatically refetch when the window regains focus or network reconnects.

​
Migration Guide

​
From NgRx Store to Standalone

1

Update imports

// Before
import { provideStoreApi } from 'ngrx-rtk-query';

// After
import { provideNoopStoreApi } from 'ngrx-rtk-query/noop-store';
2

Remove NgRx providers

// Before
providers: [
  provideStore(),
  provideStoreDevtools({ name: 'App' }),
  provideStoreApi(postsApi),
]

// After
providers: [
  provideNoopStoreApi(postsApi),
]
3

Uninstall NgRx (optional)

npm uninstall @ngrx/store @ngrx/store-devtools

​
From Standalone to NgRx Store

1

Install NgRx

npm install @ngrx/store @ngrx/store-devtools
2

Update imports

// Before
import { provideNoopStoreApi } from 'ngrx-rtk-query/noop-store';

// After
import { provideStoreApi } from 'ngrx-rtk-query';
3

Add NgRx providers

// Before
providers: [
  provideNoopStoreApi(postsApi),
]

// After
providers: [
  provideStore(),
  provideStoreDevtools({ name: 'App' }),
  provideStoreApi(postsApi),
]
Component code remains unchanged when migrating between store configurations!

​
Troubleshooting

​
Error: “Provide the Store is necessary”

This error occurs when using provideStoreApi without provideStore().
Solution: Add provideStore() before provideStoreApi(): 
providers: [
  provideStore(), // Must come first
  provideStoreApi(postsApi),
];

​
Missing DevTools

If Redux DevTools don’t show your state:
  1. Ensure provideStoreDevtools() is added
  2. Check that the browser extension is installed
  3. Verify reducerPath is unique for each API

​
Switching Between Providers

The API surface is identical, so switching providers requires no component changes: 
// Both work with the same component code
provideStoreApi(postsApi);
provideNoopStoreApi(postsApi);

Build docs developers (and LLMs) love

Get started for freeTalk to us