Route After Action Completes - NGRX and Angular

Question

Angular 5 and NGRX 5

I am attempting to run some custom validation after a users clicks a search button, and if the validation is successful, route to a new page.

I have an isError observable that is being populated from my store:

 isError$: Observable<boolean>;

  ngOnInit() {
    this.isError$ = this.store$.select(
      ShipmentLookupStoreSelectors.selectShipmentLookupError
    );
  }

I am calling the search action on my store as below:

  onSearch() {
   this.store$.dispatch(new ShipmentLookupStoreActions.Search());
  }

What I am confused with is how/when to actually route to the new page? What I essentially want to happen is:

run validation

if success -> route to new page

if failure -> stay on same page with updated state (isError state will be updated to true, I have this working)

I've looked into ngrx router-store but am overall confused as the best way to implement this.

timdeschryver · Accepted Answer · 2018-10-29 07:54:25Z

As mentioned in Start using ngrx/effects for this, you can do this in an effect.

The example in the article is when you logout, but the same counts for your use case:

@Effect({ dispatch: false })
logOut = this.actions.pipe(
  ofType(ActionTypes.LogOut),
  tap([payload, username] => {
    this.router.navigate(['/']);
  })
)

Notice we're using dispatch: false in order to prevent an infinite loop of dispatching actions.

this is working for me. do you know if its possible to call this action from another action? i essentially want to run some validation, and if it passes, call this action — Tony Scialo, Oct 30 '18 at 15:45
You can't call actions from actions. You can do this by using effects, a more detailed look can be found at blog.nrwl.io/… — timdeschryver, Oct 30 '18 at 19:43

score 1 · Answer 2

You have to add a property on your state that indicates that validation was successful. Obviously your reducer should set the said property to true whenever the validation is successful.

Once you've done that, in your component you have to store.select and subscribe to that slice of state and route whenever it returns true.

来自 https://stackoverflow.com/questions/53037733/route-after-action-completes-ngrx-and-angular

timdeschryver · Accepted Answer · 2018-10-29 07：54：25Z

如开始为此使用ngrx / effects中所述，您可以在效果中执行此操作。

本文中的示例是您注销时的情况，但对于您的用例而言，计数是相同的：

@Effect({ dispatch: false })
logOut = this.actions.pipe(
  ofType(ActionTypes.LogOut),
  tap([payload, username] => {
    this.router.navigate(['/']);
  })
)

请注意，我们正在使用dispatch: false该命令来防止调度动作的无限循环。

这为我工作。您知道是否可以从另一个动作中调用此动作吗？我本质上是想进行一些验证，如果通过了，请执行此操作 — Tony Scialo, 18年10月30日在15:45
您不能从操作中调用操作。您可以通过使用效果来做到这一点，可以在blog.nrwl.io/…中 — timdeschryver, 18

邦·马卡林东 · Answer 4 · 2018-10-29 03:24:40Z

您必须在状态上添加一个属性，该属性指示验证成功。显然，只要验证成功，您的化简器就应该将所述属性设置为true。

完成此操作后，store.select无论何时返回，您都必须在组件中订阅并订阅该状态和路由true。

You are here

Route After Action Completes - NGRX and Angular 行动完成后的路线-NGRX和Angular 有大用有大大用

Route After Action Completes - NGRX and Angular

2 Answers

正确答案

行动完成后的路线-NGRX和Angular

2个答案正确答案

来自 https://stackoverflow.com/questions/53037733/route-after-action-completes-ngrx-and-angular

友情链接

搜索表单

用户登录

You are here

Route After Action Completes - NGRX and Angular 行动完成后的路线-NGRX和Angular 有大用 有大大用

Route After Action Completes - NGRX and Angular

2 Answers

正确答案

行动完成后的路线-NGRX和Angular

2个答案 正确答案

来自 https://stackoverflow.com/questions/53037733/route-after-action-completes-ngrx-and-angular

友情链接

Route After Action Completes - NGRX and Angular 行动完成后的路线-NGRX和Angular 有大用有大大用

2个答案正确答案