从组件分派操作时未调用 ngrx 效果

问题描述 投票：0回答：6

我遇到了 ngrx 存储问题，没有调度一个动作来处理它。

这是尝试调度的组件：

  signin() {
    this.formStatus.submitted = true;
    if (this.formStatus.form.valid) {
      this.store.dispatch(new StandardSigninAction(this.formStatus.form.value.credentials));
    }
  }

行动：

export const ActionTypes = {
  STANDARD_SIGNIN: type('[Session] Standard Signin'),
  LOAD_PERSONAL_INFO: type('[Session] Load Personal Info'),
  LOAD_USER_ACCOUNT: type('[Session] Load User Account'),
  RELOAD_PERSONAL_INFO: type('[Session] Reload Personal Info'),
  CLEAR_USER_ACCOUNT: type('[Session] Clear User Account')
};

export class StandardSigninAction implements Action {
  type = ActionTypes.STANDARD_SIGNIN;

  constructor(public payload: Credentials) {
  }
}
...

export type Actions
  = StandardSigninAction
  | LoadPersonalInfoAction
  | ClearUserAccountAction
  | ReloadPersonalInfoAction
  | LoadUserAccountAction;

效果：

  @Effect()
  standardSignin$: Observable<Action> = this.actions$
    .ofType(session.ActionTypes.STANDARD_SIGNIN)
    .map((action: StandardSigninAction) => action.payload)
    .switchMap((credentials: Credentials) =>
      this.sessionSigninService.signin(credentials)
        .map(sessionToken => {
          return new LoadPersonalInfoAction(sessionToken);
        })
    );

我可以在调试中看到该组件确实调用了调度方法。我还可以确认 

StandardSigninAction
确实已实例化，因为构造函数中的断点已命中。

但是

standardSignin$
效果不叫...

什么可能导致效果不被调用？

如何调试商店内发生的情况？

有人可以帮忙吗？

附注我在导入中按如下方式运行上述效果：

EffectsModule.run(SessionEffects),

编辑：这是我的 SessionSigninService.signin 方法（确实返回一个 Observable）

  signin(credentials: Credentials) {
    const headers = new Headers({'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'});
    const options = new RequestOptions({headers: headers});
    const body = 'username=' + credentials.username + '&password=' + credentials.password;
    return this.http.post(this.urls.AUTHENTICATION.SIGNIN, body, options).map(res => res.headers.get('x-auth-token'));
  }
ngrx ngrx-effects
6个回答
22
投票

这不是一个明确的答案，但希望它会有所帮助。

开始之前：

  • 确保您使用的是最新版本的 
    @ngrx
    软件包（适合您正在使用的 Angular 版本）。
  • 如果您更新了任何软件包，请确保重新启动您的开发环境（即重新启动捆绑器、服务器等）

如果您还没有这样做，您应该查看 

Store
的实现 - 以便您对可能出现的问题做出一些有根据的猜测。请注意，
Store
非常轻。它既是一个可观察对象（使用状态作为其源）又是一个观察者（服从调度程序）。

如果您查看 

store.dispatch
，您会发现它是 
store.next
，在 
next
 上调用 
Dispatcher。



所以打电话：



this.store.dispatch(new StandardSigninAction(this.formStatus.form.value.credentials));




应该只看到调度程序发出的操作。



注入到效果中的 
Actions
 observable 也非常轻。它只是一个使用 
Dispatcher
 作为源的可观察值。



要查看效果中的操作，您可以替换以下内容：



@Effect()
standardSignin$: Observable<Action> = this.actions$
  .ofType(session.ActionTypes.STANDARD_SIGNIN)




这样：



@Effect()
standardSignin$: Observable<Action> = this.actions$
  .do((action) => console.log(`Received ${action.type}`))
  .filter((action) => action.type === session.ActionTypes.STANDARD_SIGNIN)




ofType
 不是操作员；它是一种方法，因此要添加基于 
do
 的日志记录，需要将其替换为 
filter
。



日志记录到位后，如果您收到操作，则效果的实现存在问题（或者操作类型的字符串/常量可能不是您认为的那样，并且某些内容不匹配）。



如果效果没有收到调度的操作，最可能的解释是您用于调度 
store
 的 
StandardSigninAction
 与您的效果所使用的 
store
 不同 - 也就是说，您有一个DI 问题。



如果是这种情况，您应该看看与您所说的其他 
SessionEffects
 有何不同。 （至少你有一些东西可以工作，这是开始试验的好地方。）它们是从不同的模块分派的吗？调度 
StandardSigninAction
 的模块是功能模块吗？



如果您破解其中一个正在运行的 
SessionEffects
 以将其调度操作替换为 
StandardSigninAction
，会发生什么？那么效果运行了吗？



请注意，这个答案末尾的问题不是我想要回答的问题；这些是您应该问自己并进行调查的问题。

    

      

      
      
      

      

        

          

            

              
15
投票

              
            

          

        

        


您的商店的流可能会因为未处理的错误而停止，或者 - 也许更令人困惑 - 看起来使用 
.catch
 '处理' 的错误实际上会杀死流，而无需重新发出新的 Observable 来让事情继续进行。



例如，这将杀死流：



this.actions$
    .ofType('FETCH')
    .map(a => a.payload)
    .switchMap(query => this.apiService.fetch$(query)
        .map(result => ({ type: 'SUCCESS', payload: result }))
        .catch(err => console.log(`oops: ${err}`))) // <- breaks stream!




但这会让事情保持活力：



this.actions$
    .ofType('FETCH')
    .map(a => a.payload)
    .switchMap(query => this.apiService.fetch$(query)
        .map(result => ({ type: 'SUCCESS', payload: result }))
        .catch(e => Observable.of({ type: 'FAIL', payload: e}))) // re-emit




这对于任何 rxjs Observable 顺便说一句都是如此，在向多个观察者广播时考虑这一点尤其重要（就像 ngrx store 在内部使用内部 
Subject
 那样）。

    

      

      
      
      

      

        

          

            

              
11
投票

              
            

          

        

        


我正在使用更高版本的ngrx（7.4.0），所以cartant的建议是：



.do((action) => console.log(`Received ${action.type}`))




应该是...



... = this.actions.pipe(
   tap((action) => console.log(`Received ${action.type}`)),
   ...




最后我发现我错过了将新效果导出添加到模块，例如：



EffectsModule.forRoot([AuthEffects, ViewEffects]),  // was missing the ', ViewEffects'


    

      

      
      
      

      

        

          

            

              
6
投票

              
            

          

        

        


如果您使用的是版本 8，请确保用 
createEffect
 包裹每个操作。



示例：



Create$ = createEffect(() => this.actions$.pipe(...))


    

      

      
      
      

      

        

          

            

              
0
投票

              
            

          

        

        


另一个可能的原因是，如果您使用 nggenerate 创建导入效果的模块，请确保将其导入到应用程序模块中，因为以下命令“nggeneratemodulemyModule”不会将其添加到应用程序模块中。 

    

      

      
      
      

      

        

          

            

              
0
投票

              
            

          

        

        


对我来说，一切正常。我删除了我的node_modules，
npm install
并且它起作用了

    

      

      
    

  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.