Defining the NgRx root state key within the application state interface

Question

Defining the NgRx root state key within the application state interface

Here is an example of a selector taken from the NgRx documentation:

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

export interface FeatureState {
    counter: number;
}

export interface AppState {
    feature: FeatureState;
}

export const selectFeature = (state: AppState) => state.feature;

export const selectFeatureCount = createSelector(
    selectFeature,
    (state: FeatureState) => state.counter
);

I am facing an issue where this code does not work for me unless I also include the key of the root state defined in app.module.ts. For example, if I have the following setup in app.module.ts:

StoreModule.forRoot({rootKey: reducer}),

In order to make my selector work, I have to modify it like this:

export const selectFeature = (state: AppState) => state.rootKey.feature;

However, doing this results in an error because it deviates from my original AppState interface.

What could be causing this issue? What am I doing wrong?

javascript angular typescript redux ngrx

Answer 1

Answer №1

This is my configuration process

export interface State {
    router: fromRouter.RouterReducerState<any>;
}

export const ROOT_REDUCERS_TOKEN = new InjectionToken<
    ActionReducerMap<State, Action>
>("Root reducers token", {
    factory: () => ({
        router: fromRouter.routerReducer
    })
});

export function actionLogger(reducer: ActionReducer<State>): ActionReducer<State> {
    return (state: State, action: any): any => {
        const result = reducer(state, action);
        console.groupCollapsed(action.type);
        console.log("previous state", state);
        console.log("action taken", action);
        console.log("resulting state", result);
        console.groupEnd();

        return result;
    };
}

export const additionalReducers: Array<MetaReducer<State>> = !environment.production
    ? [actionLogger]
    : [];

Inside my app.module.ts file

StoreModule.forRoot(ROOT_REDUCERS_TOKEN, {
  metaReducers: additionalReducers,
  runtimeChecks: {
    strictStateImmutability: true,
    strictActionImmutability: true,
    strictStateSerializability: true,
    strictActionSerializability: true,
  },
}),

Answer 2

This is my configuration process

export interface State {
    router: fromRouter.RouterReducerState<any>;
}

export const ROOT_REDUCERS_TOKEN = new InjectionToken<
    ActionReducerMap<State, Action>
>("Root reducers token", {
    factory: () => ({
        router: fromRouter.routerReducer
    })
});

export function actionLogger(reducer: ActionReducer<State>): ActionReducer<State> {
    return (state: State, action: any): any => {
        const result = reducer(state, action);
        console.groupCollapsed(action.type);
        console.log("previous state", state);
        console.log("action taken", action);
        console.log("resulting state", result);
        console.groupEnd();

        return result;
    };
}

export const additionalReducers: Array<MetaReducer<State>> = !environment.production
    ? [actionLogger]
    : [];

Inside my app.module.ts file

StoreModule.forRoot(ROOT_REDUCERS_TOKEN, {
  metaReducers: additionalReducers,
  runtimeChecks: {
    strictStateImmutability: true,
    strictActionImmutability: true,
    strictStateSerializability: true,
    strictActionSerializability: true,
  },
}),

Defining the NgRx root state key within the application state interface

Answer №1

Similar questions

Utilizing Angular Material Table to present information efficiently

Setting up Typescript error handling for next-auth getProviders configuration

How can we transfer or exclude all boolean properties from one class to another or a "type"?

When utilizing create-next-app, an error may occur stating that the produced JSX.Element cannot be assigned to a variable

Discover the most effective method for identifying duplicate items within an array

What is the best way to add elements using JavaScript when a particular character is present?

Tips for displaying a single item in Angular2 and Ionic2

Heroku NodeJS - Page Not Found: Error 404

To successfully handle this file type in Next.js, make sure you have the necessary loader configured as no loaders are currently set up to process this specific file

Mastering the art of utilizing $.get(url, function(data) in pure JavaScript

Sending a JavaScript array along with a form using the jQuery ajax function

Repairing the orientation in unique threejs capsule geometric shape

Yes, it's not able to retrieve the value from headlessui combobox

What is the best way to extract the elements within a form using Angular and automatically add them to a list?

Using withRouter() to redirect will display all components

Issue with sending Angular 7 HttpClient post request to Node.js server

Ensuring draggable div remains fixed while scrolling through the page

How can you create a MUI textfield that only allows numerical values to be entered in the password field?

How can we determine if the mat-datepicker popup was closed due to a date being selected?

What is the most effective way to exchange data among multiple React applications?