Angular 8：在 NgRx 中使用 mat-tree

Question

几周前，我使用 Angular 8 和一些Angular Material启动了一个应用程序，而我是该框架的菜鸟……但我喜欢挑战！

该应用程序最有趣的功能之一是显示一棵树，并在用户单击其中一个节点时通过从远程 API 获取它们来动态查找下一个节点。

目前，我已经成功地使用 NgRx 管理我的全局存储，使用效果来发出请求、调度正确的动作、设置减速器、创建我的选择器......我也遵循了来自 Angular Material 的带有动态数据的树示例，但我没有真的不知道示例使用的模式

这是我管理商店+请求的代码

// movies.actions.ts
export const MOVIES_ACTIONS_REQUEST_CHILDREN = 'movies/REQUEST_CHILDREN';
export const MOVIES_ACTIONS_REQUEST_CHILDREN_SUCCESS = 'movies/REQUEST_CHILDREN_SUCCESS';
export const MOVIES_ACTIONS_REQUEST_CHILDREN_ERROR = 'movies/REQUEST_CHILDREN_ERROR';

export class GetMovieChildren extends IAction {
  public static readonly type: string = MOVIES_ACTIONS_REQUEST_CHILDREN;

  constructor(
    public parentId: number,
  ) {
    super();
  }
}

export class getMoviesChildrenSuccess extends IAction {
  public static readonly type: string = MOVIES_ACTIONS_REQUEST_CHILDREN_SUCCESS;

  constructor(
    public children: Array<any>,
  ) {
    super();
  }
}

export class getMoviesChildrenError extends IAction {
  public static readonly type: string = MOVIES_ACTIONS_REQUEST_CHILDREN_ERROR;

  constructor(
    public error: any,
  ) {
    super();
  }
}

// movies.effects.ts
@Effect()
public getMoviesChildren$: Observable<IAction> = this.actions$.pipe(
  ofType(MOVIES_ACTIONS_REQUEST_CHILDREN),
  mergeMap((action) => {
    return this.movieService.getMoviesChildren(action.parentId)
    .pipe(
      map(children => new getMoviesChildrenSuccess(children),
      catchError(error => of(new getMoviesChildrenError(error))),
    );
  }),
);

// movies.services.ts
public getMoviesChildren(parentId: string): Observable<Array<any>> {
  return this.request.get(`http://localhost:9000/movies/${parentId}/children`)
  .pipe(
    map(formatResponseToJSON),
    catchError(errorHandle),
  );
}

// movies.reducer.ts
/** Should I manage a movies tree or an set of nodes in the reducer ? **/

我只是想堵塞这个代码这一个（树与动态数据段）让孩子的异步加载，当一个节点上用户点击。 有人之前已经经历过这种情况并且可以帮助我实现异步树的步骤吗？ 是否有关于管理树的最佳实践（在 NgRx Store 内？）

谢谢 ！ 胡安

PS：如果需要我可以放一些代码

Answer 1

您可以在您的状态中维护扩展（选定）节点的状态，并通过选择器获取您需要显示（根和扩展）的节点。 然后你可以实现 DataSource ，它利用该选择器向树组件提供数据。 像这样的东西：

export class DynamicDataSource implements DataSource<Node> {

    constructor(
        private store: Store<State>,
        private treeControl: FlatTreeControl<Node>)
    {
    }

    connect(collectionViewer: CollectionViewer): Observable<Node[] | readonly Node[]> {
        this.treeControl.expansionModel.changed.subscribe(change => 
            {
                if ((change as SelectionChange<Node>).added)
                {
                    this.store.dispatch(fromActions.expandNodes({ids: change.added.map(node => node.id)}))
                }
                if ((change as SelectionChange<Node>).removed) 
                {
                    this.store.dispatch(fromActions.collapseNodes({ids: change.added.map(node => node.id)}))
                }
            }
        );
        return this.store.pipe(select(selectRootAndExpandedNodes));
    }

    disconnect(collectionViewer: CollectionViewer): void {} 
}