Angular 5 - Creating a dynamic function that generates a different dynamic function

Question

Angular 5 - Creating a dynamic function that generates a different dynamic function

One of my latest projects involved creating a versatile function that generates switch-case statements dynamically.

export function generateReducer(initialState, reducerName: ReducerName, adapter: EntityAdapter<any>): (state, initialState) => IState {
  reducerName.plural = reducerName.plural ? reducerName.plural : reducerName.singular + 's';

  return function (state = initialState, action: any): IState {
    switch (action.type) {

        case `[${reducerName.plural} Section] Load Statistics ${reducerName.singular}`:
        case `[${reducerName.plural} Section] Load Details ${reducerName.singular}`:
        case `[${reducerName.plural} Section] Load ${reducerName.plural}`:
            {
                return { ...state, loading: true, loaded: false };
            }
            ...
}

and implementing it like this

export const adapter: EntityAdapter = createEntityAdapter();

export const initialState: State = adapter.getInitialState({
    loaded: false,
    loading: false,
    selectedId: null
});

export const reducer = generateReducer(initialState, { singular: 'Skill' }, adapter);

While everything works smoothly when testing the project with ng-serve (excluding AOT mode), encountering an error occurs when attempting to build for production using ng build --prod:

ERROR in src\app\skills\skills.module.ts(46,45): Error during template compile of 'SkillsModule' Function calls are not supported in decorators but 'generateReducer' was called in 'reducers' 'reducers' references 'reducers' 'reducers' references 'reducer' at src\app\skills\store\reducers\index.ts(18,13) 'reducer' calls 'generateReducer' at src\app\skills\store\reducers\skills.reducer.ts(26,24).

I've explored various solutions to resolve this issue but it seems like I need to provide some form of indication to the compiler to recognize it as a compile-time function that produces code. Any suggestions on how to tackle this kind of challenge?

UPDATE:

I have included a stackblitz repository to showcase the error,

https://stackblitz.com/edit/reducer-factory-ngrx

Feel free to download the application, update the package.json devDependencies "@angular/cli": "^1.6.0", and test running 'ng build --prod'

javascript angular typescript ngrx angular2-aot

Answer 1

Answer №1

Make sure to include the following code in your "reducer.ts":

  export const reducer = generateReducer(initialState, { singular: 'Skill' }, adapter);

import { ActionReducerMap } from '@ngrx/store';
import { InjectionToken } from '@angular/core';

 // register reducer token
 export const reducerToken = new InjectionToken<ActionReducerMap<State>>(
   'Registered Reducers'
 );
 Object.assign(reducerToken, reducer);

 export function getReducers() {
   return reducer;
 }

Additionally, add this code in your app.module.ts file:

import { reducerToken, getReducers } from './reducer';


@NgModule({
imports: [
    BrowserModule,
    FormsModule,
    StoreModule.forRoot(reducerToken)
 ],
 declarations: [AppComponent, HelloComponent],
 providers: [
  {
    provide: reducerToken,
    useFactory: getReducers
  }
 ],
 bootstrap: [AppComponent]
})

I followed these steps and it worked perfectly for me. Hope this solution helps you as well!

Answer 2

Make sure to include the following code in your "reducer.ts":

  export const reducer = generateReducer(initialState, { singular: 'Skill' }, adapter);

import { ActionReducerMap } from '@ngrx/store';
import { InjectionToken } from '@angular/core';

 // register reducer token
 export const reducerToken = new InjectionToken<ActionReducerMap<State>>(
   'Registered Reducers'
 );
 Object.assign(reducerToken, reducer);

 export function getReducers() {
   return reducer;
 }

Additionally, add this code in your app.module.ts file:

import { reducerToken, getReducers } from './reducer';


@NgModule({
imports: [
    BrowserModule,
    FormsModule,
    StoreModule.forRoot(reducerToken)
 ],
 declarations: [AppComponent, HelloComponent],
 providers: [
  {
    provide: reducerToken,
    useFactory: getReducers
  }
 ],
 bootstrap: [AppComponent]
})

I followed these steps and it worked perfectly for me. Hope this solution helps you as well!

Angular 5 - Creating a dynamic function that generates a different dynamic function

Answer №1

Similar questions

"Utilizing the Ajax ScriptManager for Effective Namespace Management

Generating TypeScript Type Definitions for dynamic usage

The method hasOwnProperty does not function as intended

Encountering a configuration error in the Nginx.conf file while attempting to use

Whenever attempting to choose a rating, the MUI dialog continuously refreshes and resets the selected rating

Trouble with feedback form not showing up

Locate all buttons on the page that have an onclick function attached to them, and

The modifications made to a bound value in AngularJS directives do not propagate to the outside components

What potential issues can arise when importing a default export alongside a named export and using webpack in conjunction with babel?

When you compile TypeScript with the target set to 'ES3' or 'ES5', it creates an internal structure

What is the best way to use Promise.all() to delay the return of an array that is currently being constructed within the function?

Show a particular attribute from an array

Using Node http-middleware-proxy and integrating it with Express to communicate with Tomcat server

Are variables initialized before the execution of ajax?

Tips for troubleshooting my website?

Error arises on Github when submitting a pull request due to a conflicted package

Determining season goals for teams using nested JSON data

The UI in PrimeNG dropdown does not reflect changes made with patchValue()

Request a HTML variable and send it to JavaScript

Are there any instances of a race condition present in the following?