Question

我正在构建简单的电子商务应用程序。我试图防止用户在刷新页面时丢失数据。我在这种情况下使用defer（）。如果本地存储中存在用户名，它将分派一个操作，该操作将查找用户详细信息，并从购物车中查找所有项目，这是棘手的部分。尽管从http请求返回了正确的数据，仅调度了一项操作
更糟糕的是，我在其他方面的逻辑也非常相似，并且一切正常。看看：

这是登录效果，当用户通过身份验证时，它将分派两个操作，一个操作用于设置用户详细信息，第二个用于购物车初始化：

@Effect()
  login$ = this.actions$.pipe(
    ofType<LoginRequest>(AuthActionTypes.LoginRequest),
    switchMap(action => {
      return this.httpClient.post<UserDetails>('http://localhost:8080/api/v1/user/login',
        { username: action.payload.username, password: action.payload.password })
        .pipe(
          catchError(err => {    
            console.log(err)    
            this.uiService.openSnackbar(
              'Invalid username or password',
              null,
              3000
          )    
            return EMPTY;
          })
        )    
    }),
    mergeMap(userDetails => {

      localStorage.setItem("current_user_id", JSON.stringify(userDetails.id))
      localStorage.setItem("current_username", JSON.stringify(userDetails.email))

      return [
        new Login({ userDetails }),
        new ShoppingCartRequest({ userId: userDetails.id })        
      ]     
    })
  );

但是在这里这是行不通的，请注意，在合并映射中，我正在记录用户详细信息，并且我确信通过“登录”操作一切正常：

  @Effect()
  findByUsername$ = this.actions$.pipe(
    ofType<FindByUsername>(AuthActionTypes.FindByUsername),
    switchMap(action => {
      return this.httpClient.get<UserDetails>(`http://localhost:8080/api/v1/user?username=${action.payload.username}`)
        .pipe(
          catchError(err => {    
            console.log(err)    
            return EMPTY;
          })
        )    
    }),
    mergeMap(userDetails => {

      console.log(userDetails)

      return [
        new ShoppingCartRequest({ userId: userDetails.id }),
        new Login({ userDetails })
      ] 
    })
  );

我还将为defer（）和ShoppingCartRequest操作附加代码：

@Effect()
  init$ = defer((): Observable<FindByUsername | Logout> => {
    const username = localStorage.getItem("current_username");

    return (username) ?
      of(new FindByUsername({ username: JSON.parse(username) })) :
      of(new Logout())    
  });

@Effect()
    initializeShoppingCart$ = this.actions$.pipe(
        ofType<ShoppingCartRequest>(ShoppingCartActionTypes.ShoppingCartRequest),
        switchMap(action => this.httpClient.get<ShoppingCart>(`http://localhost:8080/api/v1/shoppingCart/${action.payload.userId}`)
            .pipe(
                catchError(err => {
                    console.log(err);
                    return EMPTY
                })
            )),
        map(shoppingCart => {
            return new AddEventsToShoppingCart({ events: shoppingCart.events })
        })
    )

这里有什么想法吗？也许我在这里使用错误的地图？预先谢谢你！

Answer 1

在这种情况下，您可能要使用concatMap或MergeMap。 SwitchMap不是正确的选择。检查：NGRX effects - mapping actions to make sequential service calls and updating store

没有调度多个动作

1 个答案: