[英]What is the difference between StoreModule.forRoot() and StoreModule.forFeature()
[英]Which to use StoreModule.forRoot or StoreModule.forFeature?
我正在閱讀,他們說.forRoot 合並了所有減速器,並且在以這種方式操作 state 時,您將同時操作所有減速器。
Soon.forFeature 允許您操縱每個減速器,就好像每個減速器都有一個 state。
我想知道以下內容:
1)這是真的嗎?
2) 如何將.forFeature()
與多個減速器一起使用?
我收到以下錯誤:
NullInjectorError: R3InjectorError(AppModule)[StoreFeatureModule -> ReducerManager -> ReducerManager -> ReducerManager]:
NullInjectorError: No provider for ReducerManager!
模塊
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { environment } from 'environments/environment';
import { StoreModule } from '@ngrx/store';
import { EffectsModule } from '@ngrx/effects';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { STORE_REDUCERS, STORE_EFFECTS } from './store';
import { AppComponentModule } from '@app/components/app-component.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
AppComponentModule,
HttpClientModule,
StoreDevtoolsModule.instrument({ maxAge: 25, logOnly: !environment.production }),
StoreModule.forFeature('people', STORE_REDUCERS),
EffectsModule.forFeature(STORE_EFFECTS),
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
人物選擇器
import { createFeatureSelector, createSelector } from '@ngrx/store';
import { State, adapter } from './people.reducer';
const featureSelector = createFeatureSelector<State>('people');
export const { selectIds, selectEntities, selectAll, selectTotal } = adapter.getSelectors(featureSelector);
export const getLoading = createSelector(featureSelector, ({ loading }) => loading);
export const getError = createSelector(featureSelector, ({ error }) => error);
export const getMain = createSelector(selectAll, (peoples) => peoples.filter((people) => people.isMain)[0]);
商店索引:
import { ActionReducerMap } from '@ngrx/store';
import * as fromPeopleReducer from './people/people.reducer';
import * as fromPeopleEffects from './people/people.effects';
export interface StoreState {
people: fromPeopleReducer.State;
}
export const STORE_REDUCERS: ActionReducerMap<StoreState> = {
people: fromPeopleReducer.reducer,
};
export const STORE_EFFECTS: any[] = [fromPeopleEffects.Effects];
.forFeature
不是.forRoot
的替代品,它是一種從延遲加載的模塊或導入的庫中將 reducer 和效果注入全局存儲的方法。
在AppModule
或您的根模塊中,您必須至少擁有
imports: [
StoreModule.forRoot({}),
EffectsModule.forRoot([]),
],
然后在任何其他導入的模塊中,您可以添加類似
imports: [
StoreModule.forFeature('addresses', reducers.addresses),
StoreModule.forFeature('companies', reducers.companies),
StoreModule.forFeature('users', reducers.users),
EffectsModule.forFeature([EntityEffects]),
],
這意味着addresses
、 companies
、 users
功能將被添加到全球商店。 如果您在多個模塊中執行此操作,它仍將使用相同的功能名稱,它不會為每個模塊創建存儲上下文。 Reducers 也將接收應用程序中所有可用的操作和效果。
如果您使用 ngrx 庫編寫ngrx
或者如果沒有此模塊及其組件,它的減速器/效果無用,我建議使用.forFeature
。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.