NgRX 效果不起作用

Question

我正在尝试使用 ngrx 和 angular。我的身份验证有效，但我的产品商店无效，因为没有任何反应：

我使用模块：

const routes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    loadChildren: () => import('src/app/home/home.module')
      .then(module => module.HomeModule)
  }
]

@NgModule({
  declarations: [
    AppComponent
  ],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        RouterModule.forRoot(routes),
        EffectsModule.forRoot([]),
        StoreModule.forRoot({}),
        StoreDevtoolsModule.instrument({
            maxAge: 25,
            logOnly: environment.production
        }),
        TopBarModule,
        AuthModule,
        HomeModule

    ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

并且在我的主模块中我注入了效果服务：

const routes: Routes = [
  {
    path: '',
    component: HomeComponent
  }
]
@NgModule({
  declarations: [
    HomeComponent
  ],
  imports: [
    CommonModule,
    RouterModule.forChild(routes),
    EffectsModule.forFeature([
      GetCategoryEffectsService,
      GetProductEffectService
    ]),
    StoreModule.forFeature('category', categoryReducers),
    StoreModule.forFeature('product', productReducers),
  ],
  providers: [
    GetCategoriesService,
    GetProductsService
  ]
})
export class HomeModule { }

我的 redux 没有对这个模块做任何事情，我的效果也不起作用：

@Injectable()
export class GetProductEffectService {

  constructor(
    private actions$: Actions,
    private getProductsService: GetProductsService
  ) { }

  getProducts$ = createEffect( () =>
    this.actions$.pipe(
      ofType(getProductAction),
      switchMap(() => {
        return this.getProductsService.getProducts().pipe(
          map((products) => getProductActionSuccess({products}))
        )
      })
    ))
}

如果我订阅了在没有我的商店的情况下获取产品的方法，我将获得所有产品...

我的操作是这样的：

export const getProductAction = createAction(
  ProductActionTypes.PRODUCT_ACTION
);

export const getProductActionSuccess = createAction(
  ProductActionTypes.PRODUCT_ACTION_SUCCESS,
  props<{products: ProductInterface[]}>()
);

export const getProductActionFailure = createAction(
  ProductActionTypes.PRODUCT_ACTION_FAILURE,
  props<{error: BackendErrorsInterface}>()
);

export enum ProductActionTypes {
  PRODUCT_ACTION = '[Product] product action',
  PRODUCT_ACTION_SUCCESS = '[Product] product action success',
  PRODUCT_ACTION_FAILURE = '[Product] product action failure',
}

我的减速器类似于我的工作减速器，但这里是代码：

const initialState: ProductStateInterface = {
  data: null,
  error: null,
  isLoading: false,
  isSubmitting: false
}

const reducers = createReducer(
  initialState,
  on(
    getProductAction,
    (state): ProductStateInterface => ({
      ...state,
      isLoading: true,
      error: null
    })
  ),

  on(
    getProductActionSuccess,
    (state, action): ProductStateInterface => ({
      ...state,
      data: action.products,
      isLoading: false,
      error: null
    })
  ),

  on(
    getProductActionFailure,
    (state, action): ProductStateInterface => ({
      ...state,
      data: null,
      isLoading: false,
      error: action.error
    })
  )
);
export function productReducers(state: ProductStateInterface, action: Action){
  return reducers(state, action);
}

i select 我的产品中的操作 select 或文件：

export const actionFeatureSelector = createFeatureSelector<
  AppStateInterface,ProductStateInterface>('product');

export const productIsLoadingSelector = createSelector(
  actionFeatureSelector,
  (productState: ProductStateInterface) => productState.isLoading
);

export const getProductsSelector = createSelector(
  actionFeatureSelector,
  (productState: ProductStateInterface) => productState.data
);

export const productErrorSelector = createSelector(
  actionFeatureSelector,
  (productState: ProductStateInterface) => productState.error
);

export const productIsSubmittingSelector = createSelector(
  actionFeatureSelector,
  (productState: ProductStateInterface) => productState.isSubmitting
);

这家商店没有任何反应。这是我的组件：

ngOnInit(): void {
    this.initializeValues();
  }

  private initializeValues(): void {
  
    this.store.pipe(select(getProductsSelector)) //.subscribe(test => console.log(test));
   
    this.categories$ = this.store.pipe(select(categorySelector));
    
    this.isLoading$ = this.store.pipe(select(isLoadingSelector));
  }

Answer 1

您有一个仅在调度 getProductAction 时触发的效果：

getProducts$ = createEffect( () =>
    this.actions$.pipe(
      ofType(getProductAction),
      switchMap(() => {
        return this.getProductsService.getProducts().pipe(
          map((products) => getProductActionSuccess({products}))
        )
      })
    ))

但是，您从未实际发送操作，因此永远不会触发效果。

我建议您在您的组件中发送操作：

ngOnInit(): void {
    this.initializeValues();
    this.store.dispatch(getProductAction()); // <-- here you trigger the effect to fetch the products

  }

  private initializeValues(): void {
  
    this.store.pipe(select(getProductsSelector)) //.subscribe(test => console.log(test));
   
    this.categories$ = this.store.pipe(select(categorySelector));
    
    this.isLoading$ = this.store.pipe(select(isLoadingSelector));
  }

NgRX 效果不起作用

NgRX Effect is not workling

less

rxjs

typescript

ngrx

angular