时间戳

首页 > 解决方案 > TypeScript：触发动作的 NgRx 效果

javascript - TypeScript：触发动作的 NgRx 效果

问题描述

我是 NgRx 的新手，我的大部分代码都可以正常工作，但我被困在这个特定的代码上，我需要你的帮助。

当登录效果被触发并成功发送到 LoginSuccess 时，我正在尝试保存到本地存储并触发另一个动作。

下面是我的示例代码

影响

    @Effect({ dispatch: false })
    LogInSuccess$: Observable<any> = this.actions$.pipe(
        ofType<businessActions.LogInSuccess>(
            businessActions.AuthActionTypes.LOGIN_SUCCESS
        ),
        map((action: businessActions.LogInSuccess) => {
            localStorage.setItem('token', JSON.stringify(action.payload));
            this.navCtrl.navigateRoot('/home');
        }), map(
            () => new businessActions.LoadBiz()
        )
    );

标签： javascriptangulartypescriptionic-frameworkngrx

解决方案

我从您的评论和代码中推测您正在尝试根据某些服务（LoginService）的响应来实现某些 UI 行为。该代码适用于图书馆或服务。但是在某些时候你需要知道结果，在某些时候你需要subscribe()知道你正在创建的 observable 才能知道它的结果

最后打个subscribe()电话。否则你的 observable 将永远不会实现。

更新

除了subscribe()调用之外，您还需要导航到/homeurl，然后在处理该路由的组件中加载您的业务：new businessActions.LoadBiz()

你的代码在我看来应该是：

@Effect({ dispatch: false })
LogInSuccess$: Observable<any> = this.actions$.pipe(
    ofType<businessActions.LogInSuccess>(
        businessActions.AuthActionTypes.LOGIN_SUCCESS
    ),
    map((action: businessActions.LogInSuccess) => {
        localStorage.setItem('token', JSON.stringify(action.payload));
    })
).subscribe(() => this.navCtrl.navigateRoot('/home'));

那么无论你在哪里处理/home路由，在组件的 init() 方法中，new businessActions.LoadBiz()或者更好的是，将逻辑提取businessActions到服务中，注入服务并调用：然后businessActions.LoadBiz()不需要new在你的 UI 中调用。

推荐阅读