angular - 我的 ngrx 商店将如何检测服务器端的变化？

Question

我最近将 ngrx 存储添加到我现有的 angular2 应用程序中，以简化代码并保持共享状态。 但是我对一个部分感到困惑，我一开始就从服务器更新我的状态，之后我只是在不检查服务器的情况下处理状态。那么，当后端发生某些变化时会发生什么？我是每次访问该页面时都要检查它还是有更好的方法？ 基本上，我想知道确保更新状态数据以显示服务器数据的最佳做法是什么？

Answer 1

推荐使用NGRX Effects .当您将 NGRX Effects 与 Store 一起实现时，任何 HTTP 副作用都由 Effects 处理，而 Effects 将使用 Store 中的 Action 来更新数据。 Effect 监听 Action 并使用 Action 的有效负载来执行副作用 (HTTP)。当 Effect 完成时，它会使用新的有效负载调用新的 Action(成功的 Action 或失败的 Action)，从而更新 Store 中的数据。

在example in the Effects docs它显示了 Login 的效果:

@Injectable()
export class AuthEffects {
  constructor(
    private http: Http,
    private actions$: Actions
  ) { }

  @Effect() login$ = this.actions$
      // Listen for the 'LOGIN' action
      .ofType('LOGIN')
      // Map the payload into JSON to use as the request body
      .map(action => JSON.stringify(action.payload))
      .switchMap(payload => this.http.post('/auth', payload)
        // If successful, dispatch success action with result
        .map(res => ({ type: 'LOGIN_SUCCESS', payload: res.json() }))
        // If request fails, dispatch failed action
        .catch(() => Observable.of({ type: 'LOGIN_FAILED' }))
      );
}

在此示例中，登录效果监听 LOGIN 操作。当 LOGIN 操作发生时，它使用操作的有效负载并执行 HTTP POST。当 HTTP POST 返回时，它要么使用负载的 json 响应调用操作 LOGIN_SUCCESS，要么返回 LOGIN_FAILED 操作。

这样一来，您的 Store 将始终处于任何副作用(例如 HTTP)的循环中。如果一个组件更新了数据库中的一条记录，Effect 应该通知 Store，以便所有订阅该数据的组件都能获得更新后的数据。

希望对您有所帮助。