How to use INITIAL_STATE injection token with dependencies?

ngrx
injectiontoken
ngrx/effects
ngrx/store
no provider for injectiontoken
ngrx payload
ngrx initial state
ngrx actions

I have a lazy-loaded module with a ngrx/store for feature StoreModule.forFeature('tasks', tasksReducer). I need to set the initial state for it, but the values that I need to set require a dependency injection to get them (those values are selected from another feature store in a service). I read that it's possible to use INITIAL_STATE injection token for this purpose. I tried the following:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule } from '@realiecho/shared/shared.module';
import { tasksRoutes } from './tasks.routing';
import { TasksComponent } from './tasks/tasks.component';
import { INITIAL_STATE, StoreModule } from '@ngrx/store';
import { tasksReducer } from '@realiecho/main/tasks/store/tasks.reducer';
import { TasksEffects } from '@realiecho/main/tasks/store/tasks.effects';
import { TasksTableViewComponent } from '@realiecho/main/tasks/tasks/tasks-table-view/tasks-table-view.component';
import { EffectsModule } from '@ngrx/effects';

import { InitialStateService } from '@reali/web-core';

export const TASK_EFFECTS = [
    TasksEffects
];

@NgModule({
    imports: [
        CommonModule,
        tasksRoutes,
        SharedModule,
        EffectsModule.forFeature(TASK_EFFECTS),
        StoreModule.forFeature('tasks', tasksReducer),
    ],
    declarations: [
        TasksComponent,
        TasksTableViewComponent
    ],
    providers: [
        {
            provide: INITIAL_STATE,
            useFactory: getInitialState,
            deps: [InitialStateService]
        }
    ]
})
export class TasksModule {
}


export function getInitialState(initService: InitialStateService) {

     return initService.getInitState();

}

but when I run it, the initial state is undefined regardless of what I return in initService.getInitState(), even if I return hardcoded constant.

    import { inject } from '@angular/core';  

    export function getInitialState() {
     return inject(InitService).getInitState();
    }

can you try something like that? or

export class TasksModule {
static forRoot(): ModuleWithProviders {
    return {
      ngModule: TasksModule ,
    providers: [
        {
            provide: INITIAL_STATE,
            useFactory: getInitialState,
            deps: [InitialStateService]
        }
    ]
    }
  }

then for appModule

@NgModule({
        imports: [
            ...
           TaskModule.forRoot(),
          ...
        ],

    })
export class AppModule {
}

Using Dependency Injection, To inject the root reducers into your application, use an InjectionToken and a Provider to register the reducers through dependency injection. import { NgModule� Exactly how you use service locators and dependency injection to perform this is less of an issue, and depends on the specific circumstances you're in. These circumstances may well lead you to a packaged framework to manage these dependencies, or if your case is simple it may be fine to roll your own.

I think you need to the following: StoreModule.forFeature('tasks', tasksReducer, INITIAL_STATE)

Though I'm now struggling with how to reset the initial state in the reducer.

Cheers

James

INITIAL_STATE injection token with new createReducer function , I want to set the initial state of a feature module with the INITIAL_STATE token, because i need to inject and use a service before setting the� So we use the combineLatest operator to make sure that when any of the stream is updated we encrypt the message again with the new text and/or the new initial state. B2 - Create an Enigma machine using dependency injection I mentioned at the beginning of the article that we would use the dependency injection mechanism provided by Angular.

I had the same problem and unfortunately it isn't possible to use the INITIAL_STATE token for a feature module. I got the following answer via github:

The INITIAL_STATE token is only used to set the initial state of the root module. You could use the OnInitEffect lifecycle or the @ngrx/store/update-reducers action to dispatch a "set action" to set the state of the feature module in a reducer.

Github Link

Dependency injection in action, You can use an injection token for any kind of provider but it's particularly helpful when the dependency is a simple value like a string, a number, or a function. Requests a permission that the application must be granted in order for it to operate correctly. Permissions are granted by the user when the application is installed (on devices running Android 5.1 and lower) or while the app is running (on devices running…

InjectionToken, Use an InjectionToken whenever the type you are injecting is not reified (does not have a needs to inject dependencies, it can do so using the inject function. MindSphere may use both hard and soft key rotation processes. This section describes the stages of each process. Hard Key Rotation¶ Initial State The token_keys endpoint returns an array of public keys containing only one public key, e.g, a key with key ID (kid) {key_id_1} (value may differ).

Understanding the magic behind StoreModule of NgRx (@ngrx/store , const REDUCERS_TOKEN = new InjectionToken('REDUCERS'); @NgModule({ imports: [ StoreModule. constructor( @Inject(INITIAL_STATE) private initialState: any, You can use the same action with multiple reducers. We can inject dependencies by registering the meta-reducer as factory provider� Just like you use Git / SVN to manage changes in your source code, you can use migrations to keep track of changes to the database. With migrations you can transfer your existing database into another state and vice versa: Those state transitions are saved in migration files, which describe how to get to the new state and how to revert the

Tutorial: Building Redux in TypeScript with Angular � ng-book.com , There are several attempts to use Redux or create a Redux-inspired system that itself as a dependency, and adds some Angular helpers (dependency-injection , observable wrappers). In our constructor we set the _state to the initial state. The one thing we have left to figure out is what token we want to use to inject. Mocking axios. Let's have a simple service which calls an external API: class AuthService {login (username, password) {return axios. post ('/api/login', {username, password}). the

Comments
  • That doesn't help. The problem is that getInitialState() is not executed at all. Should I pass INITIAL_STATE token somewhere else except providers?
  • this task module loaded lazy?
  • This didn't help. I still see that the function getInitState() is executed, but the result is not assigned the initial state