@addapptables/ngrx-actions 中文文档教程

Question

NGRX Actions

注意：这个库是对 ngrx-actions 库的改进。

NGRX 的动作/减速器实用程序。 它提供了一些功能来使 NGRX/Redux 更具 Angular-tastic。

• @Store(MyInitialState): Decorator for default state of a store.
• @Action(...MyActionClass: Action[]): Decorator for a action function.
• @Effect(...MyActionClass: Action[]): Decorator for a effect function.
• ofAction(MyActionClass): Lettable operator for NGRX Effects
• createReducer(MyStoreClass): Reducer bootstrap function
• @Select('my.prop'): Select decorator

查看变更日志了解最新变更。

Whats this for?

这是在使用 Redux 模式时帮助减少样板代码的糖。 也就是说，这是它提供的高级功能：非常

• Reducers become classes so its more logical organization
• Automatically creates new instances so you don't have to handle spreads everywhere
• Enables better type checking inside your actions
• Reduces having to pass type constants by using type checking

简单 (<100LOC)，您可以选择要在何处使用它。

Getting Started

首先，让我们通过 npm 安装包：

npm i @addapptables/ngrx-actions --S

Reducers

接下来，创建一个操作，就像您今天使用 NGRX 所做的那样：

export class MyAction {
  readonly type = 'My Action';
  constructor(public payload: MyObj) {}
}

然后您创建一个类并使用包含的 Store 装饰器装饰它 reducer 的初始状态。 在那个类中你定义方法 用带有动作类参数的 Action 装饰器装饰 你想匹配它。

import { Store, Action } from 'ngrx-actions';

@Store({
    collection: [],
    selections: [],
    loading: false
})
export class MyStore {
    @Action(Load, Refresh)
    load(state: MyState, action: Load) {
        state.loading = true;
    }

    @Action(LoadSuccess)
    loadSuccess(state: MyState, action: LoadSuccess) {
        state.collection = [...action.payload];
    }

    @Action(Selection)
    selection(state: MyState, action: Selection) {
        state.selections = [...action.payload];
    }

    @Action(DeleteSuccess)
    deleteSuccess(state: MyState, action: DeleteSuccess) {
        const idx = state.collection.findIndex(r => r.myId === action.payload);
        if (idx === -1) {
          return state;
        }
        const collection = [...state.collection];
        collection.splice(idx, 1);
        return { ...state, collection };
    }
}

你可能会注意到，我不返回状态。 那是因为如果它看不到 从动作中返回的状态，它检查该状态是否是 对象或数组并自动为您创建一个新实例。 如果你是 改变深层嵌套的属性，你仍然需要自己处理这些。

你仍然可以自己返回状态，它不会弄乱它。 这很有帮助 因为如果状态没有改变或者你有一些复杂的逻辑在进行。 这可以是 在 deleteSuccess 操作中看到。

在上面你可能会注意到，第一个动作有多个动作类。 那是因为 @Action 装饰器可以接受单个或多个动作。

要将其连接到 NGRX，您所要做的就是调用 createReducer 函数传递 你的商店。 现在传递 myReducer 就像传递内部带有 switch 语句的函数一样。

import { createReducer } from 'ngrx-actions';
export function myReducer(state, action) { return createReducer(MyStore)(state, action); }

在上面的示例中，我返回了一个返回我的 createReducer 的函数。 这是因为 AOT 抱怨说 装饰器不支持函数表达式 如果我们只是赋值 createReducer 方法直接。 这是一个已知问题，其他 NGRX 问题也受到影响。

接下来，像往常一样将其传递给您的 NGRX 模块：

@NgModule({
   imports: [
      StoreModule.forRoot(reducers, { metaReducers }),
      ReduxRegisterModule.forRoot({
         pizza: PizzaStore
      })
   ]
})
export class AppModule {}

您也可以选择将您的商店直接提供给 ReduxRegisterModule ，它将处理 为您创建减速器，还可以在您的商店中使用 DI。 所以而不是 在forRoot 或forFeature 中用StoreModule 描述，我们在ReduxRegisterModule 上调用它们。

@NgModule({
   imports: [
      ReduxRegisterModule.forFeature('menu', {
          sidebar: MenuStore
      })
   ]
})
export class ChildModule {}

Effects

如果你想使用 NGRX 效果，我创建了一个可让你使用的操作符 将操作类作为参数传递，如下所示：

import { ofAction } from 'ngrx-actions';

@Injectable()
export class MyEffects {
    constructor(
        private update$: Actions,
        private myService: MyService
    ) {}

    @Effect()
    Load$ = this.update$.pipe(
        ofAction(Load),
        switchMap(() => this.myService.getAll()),
        map(res => new LoadSuccess(res))
    );
}

@Effect 您可以在商店中定义它以执行异步操作。

@Store({ delievered: false })
export class PizzaStore {
    constructor(private pizzaService: PizzaService) {}

    @Action(DeliverPizza)
    deliverPizza(state) {
        state.delivered = false;
    }

    @Effect(DeliverPizza)
    deliverPizzaToCustomer(state, { payload }: DeliverPizza) {
        this.pizzaService.deliver(payload);
    }
}

效果总是在动作之后运行。

Selects

我们没有遗漏选择器，有一个 Select 装饰器接受（深）路径字符串。 这看起来像：

@Component({ ... })
export class MyComponent {
    // Functions
    @Select((state) => state.color) color$: Observable<string>;

    // Array of props
    @Select(['my', 'prop', 'color']) color$: Observable<strinv>;

    // Deeply nested properties
    @Select('my.prop.color') color$: Observable<string>;

    // Implied by the name of the member
    @Select() color: Observable<string>;

    // Remap the slice to a new object
    @Select(state => state.map(f => 'blue')) color$: Observable<string>;
}

您可以开始在任何组件中使用它。 它也适用于功能商店。 注意：由于 TypeScript#4881，Select 装饰器存在缺乏类型检查的限制。