如何将reducer函数导出并添加到Angular中的storeModule.forRoot？

Question

我是 ngrx 的新手，正在阅读他们网站上的 ngrx 文档 ngrx.io。我在他们的 reducer 中偶然发现了一些代码，但我不明白。

这是 counter.actions.ts 文件

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

export const increment = createAction('[Counter Component] Increment');
export const decrement = createAction('[Counter Component] Decrement');
export const reset = createAction('[Counter Component] Reset');

这是 counter.reducer.ts 文件。

import { createReducer, on } from '@ngrx/store';
import { increment, decrement, reset } from './counter.actions';
 
export const initialState = 0;
 
const _counterReducer = createReducer(
  initialState,
  on(increment, (state) => state + 1),
  on(decrement, (state) => state - 1),
  on(reset, (state) => 0)
);
 
export function counterReducer(state, action) {
  return _counterReducer(state, action);
}

这是应用模块文件


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
import { AppComponent } from './app.component';
 
import { StoreModule } from '@ngrx/store';
import { counterReducer } from './counter.reducer';
 
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, StoreModule.forRoot({ count: counterReducer })],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

我的问题如下：

什么是

export function counterReducer(state, action) {
  return _counterReducer(state, action);
}

在减速器文件中？

是否需要counterReducer？
为什么不单独导出 _counterReducer 并将其添加到应用程序模块文件中的 storeModule.forRoot。

我在 ngrx 网站上阅读有关 action 的文章时看到了这些

The exported reducer function is necessary as function calls are not supported the View Engine AOT compiler. It is no longer required if you use the default Ivy AOT compiler (or JIT).

这是一个可能的解释吗？

Answer 1

我相信以下方法会奏效，通过另一个函数重新导出的额外步骤没有实际意义，因为它实际上没有任何作用。

import { createReducer, on } from '@ngrx/store';
import { increment, decrement, reset } from './counter.actions';
 
export const initialState = 0;
 
const counterReducer = createReducer(
  initialState,
  on(increment, (state) => state + 1),
  on(decrement, (state) => state - 1),
  on(reset, (state) => 0)
);

Answer 2

1,2)。你的 reducer 必须导出 reduce method/function。您可以按照@wscttc 的建议将其导出。如果你的 reducer returns 是一个更复杂的对象，你甚至可以为响应添加一个类型。

import { createReducer, on } from '@ngrx/store';
import { increment, decrement, reset } from './counter.actions';
 
const initialState = 0;
 
export const counterReducer = createReducer<number>(
  initialState,
  on(increment, (state) => state + 1),
  on(decrement, (state) => state - 1),
  on(reset, (state) => 0)
);

3).主要思想是具有特征状态。随着您的应用程序的增长，明智的做法是拥有多个具有自己的减速器、效果、动作的功能状态。

如何将reducer函数导出并添加到Angular中的storeModule.forRoot？

How to export the reducer function and add it to the storeModule.forRoot in Angular?

javascript

typescript

ngrx

angular