首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >在调用api之前检查ngrx效果中的存储数据时会遇到问题

在调用api之前检查ngrx效果中的存储数据时会遇到问题
EN

Stack Overflow用户
提问于 2020-07-23 13:23:59
回答 1查看 845关注 0票数 1

你好,我是NgRx应用程序的新手,对于如何解决这个特殊问题有太多的困惑。我想检查存储中的数据,如果数据是空的,只有这样,我才想使用NgRx效果继续进行api调用。

在尝试了不同的事情后,今天花了一整天的时间,我放弃了,想从这里得到一些专家的指导。

下面是我的全部代码:

analytics.effects.ts

代码语言:javascript
复制
@Injectable()
export class AnalyticsEffects {

  @Effect({dispatch: false}) loadAnalytics = this.actions$
    .pipe(
      ofType<GetAnalyticsAction>(AnalyticsTypes.GET_ANALYTICS),
      withLatestFrom(**/* cannot make this line to work */**),
      mergeMap(
        /* api call to get analytics data from server */
        () => this.analyticsService.getAnalyticsData()
          .pipe(
            map(data => {
              console.log('the data from api is...', data);
              return new GetAnalyticsAction(data)
            }),
            catchError(error => of(console.log("error in api request of analytics....")))
          )
      )
    )

  constructor(
    private actions$: Actions,
    private analyticsService: AnalyticsService,
    private store$: Store<AnalyticsState>
  ) { }
} 

analytics.action.ts

代码语言:javascript
复制
import {Action} from '@ngrx/store';
import {AnalyticsModel} from './analytics.model';
import {AnalyticsTypes} from './analytics.types';

export const GET_ANALYTICS = AnalyticsTypes.GET_ANALYTICS;

export class GetAnalyticsAction implements Action{
  readonly type = GET_ANALYTICS;
  constructor(public payload: AnalyticsModel) {
    console.log('payload sent from home is -> ', payload);
  }
}

export type Actions = GetAnalyticsAction

analytics.state.ts

代码语言:javascript
复制
import {AnalyticsModel} from './analytics.model';

export interface AnalyticsState {
  readonly analyticsModel: AnalyticsModel[];
}

analytics.reducer.ts

代码语言:javascript
复制
import {Action} from '@ngrx/store';
import {AnalyticsModel} from './analytics.model';
import * as AnalyticsAction from './../analytics/analytics.actions';

const defaultState: AnalyticsModel = {
  result: null,
}

export function reducer(state: AnalyticsModel[] = [defaultState], action: AnalyticsAction.Actions ){
  switch (action.type) {
    case AnalyticsAction.GET_ANALYTICS:
      console.log("store action type is -> ",action.type);
      console.log("store changed state is -> ",action.payload);
      return [...state, action.payload]
    default:
      return state
  }
}

mypage.component.ts

最后,我使用dispatcher在组件文件中触发相应的操作:

代码语言:javascript
复制
  constructor(private store: Store<AnalyticsState>) {
    this.analyticsModel = store.select( state => {state.analyticsModel} );
  }

  ngOnInit() {
    this.store.dispatch(new ActionGetAnalytics.GetAnalyticsAction(this.newAnalyticsItem));
    this.newAnalyticsItem = { result: [] };
  }

我想要什么

我只想知道,在使用withLatestFrom访问api之前,如何使用上面effects.ts文件中的effects.ts来检查存储在存储中的数据是否为空。如果存储在存储中的数据没有变化,我不希望应用程序重复加载api。

我试过什么

我完全用尽了我自己寻找不同的选择从官方文件,也提到了一些相同的问题张贴在这里。但是,我没有得到任何帮助,因为我根本不知道根据我的代码,什么样的参数会进入'withLatestFrom‘,这可以帮助我有条件地检查现有的数据。

如果你有指点的话,请帮帮我。谢谢。

EN

回答 1

Stack Overflow用户

发布于 2020-07-23 15:22:57

看看我的帖子为此开始使用ngrx/effects

代码语言:javascript
复制
@Effect()
shipOrder = this.actions.pipe(
  ofType<ShipOrder>(ActionTypes.ShipOrder),
  map(action => action.payload),
  concatMap(action =>
    of(action).pipe(
      withLatestFrom(this.store.pipe(select(getUserName)))
    )
  ),
  map([payload, username] => {
    ...
  })
)
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/63055368

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档