Is it possible to use provideState() to set up multiple reducers as root reducers?

Question

Is it possible to use provideState() to set up multiple reducers as root reducers?

Angular and ngrx are currently at version 16.0.0.

StoreModule.forRoot({
      app: appReducer,
      anotherFeatureName: anotherFeatureReducer
    }),
    EffectsModule.forRoot([
      AppEffects,
      AnotherEffects
    ]),

I have begun the migration process to a standalone Angular application. As part of this transition, I need to remove StoreModule and EffectsModule from app.module.ts. However, I am struggling to find the correct way to provide multiple reducers and their corresponding effects using standalone APIs.

I have attempted various approaches, but none have yielded the expected results. The state remains undefined when the application tries to access it.

angular typescript ngrx

Answer 1

Answer №1

1. Start by ensuring that you have imported the necessary NgRx modules along with your reducers and effects.

import { provideState } from '@ngrx/store';
import { provideEffects } from '@ngrx/effects';
import { appReducer } from './app.reducer';
import { anotherFeatureReducer } from './another-feature.reducer';
import { AppEffects } from './app.effects';
import { AnotherEffects } from './another.effects';

2. Within your app module, utilize the provideState() function to supply your root reducers.

import { provideState } from '@ngrx/store';

@NgModule({
  imports: [
    //Omit StoreModule.forRoot()
    //Omit EffectsModule.forRoot()
    // Utilize provideState() to offer your root reducers
    provideState({
      app: appReducer,
      anotherFeatureName: anotherFeatureReducer,
    }),
  ],
})
export class AppModule {}

3. In the same manner, apply the provideEffects() function to provide your root effects.

import { provideEffects } from '@ngrx/effects';

@NgModule({
  imports: [
    //Omit StoreModule.forRoot()
    //Omit EffectsModule.forRoot()
    // Utilize provideState() for your root reducers
    provideState({
      app: appReducer,
      anotherFeatureName: anotherFeatureReducer,
    }),

    // Implement provideEffects() for your root effects
    provideEffects([AppEffects, AnotherEffects]),
  ],
})
export class AppModule {}

Answer 2

1. Start by ensuring that you have imported the necessary NgRx modules along with your reducers and effects.

import { provideState } from '@ngrx/store';
import { provideEffects } from '@ngrx/effects';
import { appReducer } from './app.reducer';
import { anotherFeatureReducer } from './another-feature.reducer';
import { AppEffects } from './app.effects';
import { AnotherEffects } from './another.effects';

2. Within your app module, utilize the provideState() function to supply your root reducers.

import { provideState } from '@ngrx/store';

@NgModule({
  imports: [
    //Omit StoreModule.forRoot()
    //Omit EffectsModule.forRoot()
    // Utilize provideState() to offer your root reducers
    provideState({
      app: appReducer,
      anotherFeatureName: anotherFeatureReducer,
    }),
  ],
})
export class AppModule {}

3. In the same manner, apply the provideEffects() function to provide your root effects.

import { provideEffects } from '@ngrx/effects';

@NgModule({
  imports: [
    //Omit StoreModule.forRoot()
    //Omit EffectsModule.forRoot()
    // Utilize provideState() for your root reducers
    provideState({
      app: appReducer,
      anotherFeatureName: anotherFeatureReducer,
    }),

    // Implement provideEffects() for your root effects
    provideEffects([AppEffects, AnotherEffects]),
  ],
})
export class AppModule {}

Is it possible to use provideState() to set up multiple reducers as root reducers?

Answer №1

Similar questions

What steps should I follow to create a versatile table component?

Accessing and transferring files through Angular with a .NET Core API

Styling Angular parent and child components: Best practices for consistent design

Insert an icon on the designated date within the NGB Calendar

What is the reason for Google Chrome extension popup HTML automatically adding background.js and content.js files?

Iterate through the Ionic3/Angular4 object using a loop

Position the div beneath another div using the display:grid property

Using the React UseEffect Hook allows for value updates to occur within the hook itself, but not within the main

The generic parameter is extending a type but is being used in a contravariant position, causing TypeScript to struggle to unify it

Is there a way to extend RouteComponentProps in order to accommodate additional props?

Storing and retrieving information in ag-grid using Angular

A guide to seamlessly uploading files to s3 using nextjs, node, and typescript

Angular 2: Issue with Table not Being Updated

How can we exclude fields from JSON.stringify in type-graphql entities?

A guide to resolving the error "Cannot read properties of undefined (reading 'length')" while implementing pagination with react, Material-UI, and TypeScript

What is the process for incorporating a .scss file into an Angular 2 component?

Troubleshooting: Why is Angular's Material Autocomplete failing to function with post requests?

Is there a distinction between Entity[] and array<Entity> in TypeScript?

There seems to be an issue with the functionality of Angular's updateValueAndValidity() method

Issues with the ionViewDidLoad() function?