在路由解析器中调度ngrx存储操作 [英] Dispatch ngrx store action in route resolver

问题描述

我目前有一个容器(有状态)组件，该组件根据 ngOnInit中的路由参数(id)调度 select 和 get 操作方法.这些操作的目的是在我的商店中保存数据和选定的ID.

I'm currently have a container (stateful) component which dispatches a select and a get action based on a route param (id) in the ngOnInit method. The point of these actions to have the data and the selected id in my store.

我很好奇，在解析器中分派这些操作是否正确?

I'm curious would it be correct to dispatch these actions in a resolver?

感谢您的答复.

我的组件:

@Component({
  selector: 'app-container',
  templateUrl: './container.component.html',
  styleUrls: ['./container.component.css']
})
export class ContainerComponent implements OnInit, OnDestroy {

  private componetDestroyed$ = new Subject();

  constructor(private store: Store<fromRoot.State>, private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.params
      .filter(params => params['id'])
      .map(params => params['id'])
      .takeUntil(this.componetDestroyed$)
      .subscribe(id => {
        this.store.dispatch(new GetAction(id));
        this.store.dispatch(new SelectAction(id));
      });
  }

  ngOnDestroy() {
    this.componetDestroyed$.next();
    this.componetDestroyed$.unsubscribe();
  }   
}

我的路线:

[{
  path: ':id',
  component: ContainerComponent
}]

解析器为:

@Injectable()
class MyResolver implements Resolve<any> {

constructor(private store: Store<fromRoot.State>) {}

resolve(route: ActivatedRouteSnapshot, state: RouteStateSnapshot) {
  let id = route.params['id'];
  this.store.dispatch(new SelectAction(id));
  this.store.dispatch(new GetAction(id));
  return null;
}

以及修改后的路线:

[{
  path: ':id',
  component: ContainerComponent,
  resolve: {
    store: MyResolver
  }
}]

这就是为什么我不确定这是正确的原因，因为商店永远是 null .

And that's why I'm not sure this is correct, becuase the store will always be null.

推荐答案

在基于 this.route.params 的 ngOnInit 中调度动作的方式没有错>.

There is nothing wrong with the way how you dispatch actions in ngOnInit based on this.route.params.

重要的是，解析器是路由的数据提供者.而且，如果您不提供数据，那么您将错误地使用它们.

What is important is that the resolvers are data providers for routes. And if you don't provide data then you are using them wrongly.

在您看来，这听起来更像是一个 canActivate 警卫，负责发出动作并允许路线.

In you case it sounds more like a canActivate guard that is responsible to emit actions and allow the route.

尽管如此，您仍可以将解析器扩展到选择所需的数据.

Nevertheless you could extend the resolver to selecting data you want.

@Injectable({
    providedIn: 'root',
})
export class DataResolver implements Resolve<number> {
    constructor(private store: Store) {
    }

    public resolve(
        route: ActivatedRouteSnapshot,
        state: RouterStateSnapshot
    ): Observable<any> {
        this.store.dispatch(LoadDataForMyRoute());

        return this.store.pipe(
            select(dataForMyRoute),
            filter(data => !!data), // <- waiting until data is present
            take(1), // <- important to add
        );
    }
}

，您可以像这样访问它而不是 this.store.select .

and in your component you can access it like that instead of this.store.select.

constructor(
    protected readonly store: Store,
    protected readonly activatedRoute: ActivatedRoute,
) {}

public ngOnInit(): void {
    this.activatedRoute.data.subscribe(data => {
        // everything is here.
    });
}

这篇关于在路由解析器中调度ngrx存储操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！