@28stoneconsulting/openfin-ngrx 中文文档教程

Question

OpenfinNgrx

Motivation

将多个 OpenFin 窗口同步到一个状态或在某些情况下多个状态是一项艰巨的任务，会导致复杂的管理和重复的代码。

为多个窗口实现这样一个在它们之间传输大量数据的通信解决方案需要付出很多努力，尤其是当您有多个共享状态时。

The solution

OpenfinNgrx 提供了一个易于使用的解决方案。 它无缝地调度操作并从多个窗口的状态中选择数据。

Usage

OpenfinNgrx 使用以下方法提供 Angular 服务：

dispatchToParent - 将 NGRX 操作分派给窗口父级。

dispatchToWindow - 将 NGRX 操作分派到与给定窗口名称匹配的特定 Openfin 窗口。

dispatchToRoute - 将 NGRX 操作分派到特定路径上的所有窗口。

selectFromWindow - 从与给定窗口名称匹配的窗口状态中选择数据。

selectFromParent - 从父窗口状态中选择数据。

Change detection

默认情况下，NgZone 不知道 OpenFin IAB。 当收到来自 IAB 的消息并且未触发更改检测时，这可能会导致问题。 OpenfinNgrx 通过在每个影响窗口的动作之后触发 Angular 变化检测来解决这个问题，例如分派从另一个窗口接收到的动作或从另一个窗口的状态接收数据。

OpenfinNgrxService usage example

向父窗口的存储分派增量操作。

export class ChildWindowComponent {
  constructor(private openfinNgrxService: OpenfinNgrxService) {}

  increaseCounterOnParentWindow(increaseBy) {
    this.openfinNgrxService.dispatchToParent(
      incrementAction({ paylaod: increaseBy })
    );
  }
}

OpenfinNgrx 会将操作分派到父窗口的状态，确保将在父窗口上触发 Angular 变化检测。

也可以导入 OpenfinNgrxMetareducerModule 来注册 NGRX 元还原器，它将根据动作路由元数据调用 OpenfinNgrxService 方法。

Metareducer usage example

向特定窗口的存储分派增量操作。

import { createAction, props, Store } from "@ngrx/store";
import { RoutingInfo } from "@28stoneconsulting/openfin-ngrx";

export const incrementBy = createAction(
  "[Counter] IncrementBy",
  props<{ payload: number; routing?: RoutingInfo }>()
);

export class ChildWindowComponent {
  constructor(private store: Store) {}

  increaseCounterOnParentWindow(increaseBy) {
    this.store.dispatch(
      incrementBy({
        paylaod: increaseBy,
        // type: 'parent' | 'window' | 'route'
        // remoteOnly flag blocks local dispatch of an action
        // if no routing info is provided then action is dispatched only locally as usual
        routing: {
          receivers: [{ type: "window", name: "window_name" }],
          remoteOnly: true,
        },
      })
    );
  }
}

使用具有预配置路由信息的动作创建者将增量动作分派到父窗口的状态。

import { createAction, Store } from "@ngrx/store";
import { routingProps } from "@28stoneconsulting/openfin-ngrx";

export const incrementParentBy = createAction(
  "[Counter] IncrementBy",
  routingProps<number>({ type: "parent" }, true)
);

export class ChildWindowComponent {
  constructor(private store: Store) {}

  increaseCounterOnParentWindow(increaseBy) {
    this.store.dispatch(incrementParentBy(increaseBy));
  }
}

Demo

要克隆并运行演示，您需要 Git 和 Node.js（随 npm 一起提供）安装在您的计算机上。 从您的命令行：

# Clone this repository
git clone https://github.com/28StoneConsulting/openfin-ngrx.git
# Go into the repository
cd openfin-ngrx
# Install dependencies
npm install
# Run the the demo
npm start