我最近将ngrx存储添加到我现有的angular2应用程序中,以简化代码并维护共享状态.但是我对一部分感到困惑,我在开始时从服务器更新了我的状态,在病房之后我只是在没有检查服务器的情况下处理状态.那么当后端的某些东西发生变化时会发生什么?我是每次检查它,我去那个页面还是有更好的方法?基本上,我想知道确保更新状态数据以显示服务器数据的最佳做法是什么?
建议使用NGRX 效果。当您与 Store 一起实施 NGRX 效果时,任何 HTTP 副作用都由效果处理,而效果又将使用 Store 中的操作来更新数据。Effect 侦听 Action 并使用 Action 的有效负载来执行副作用 (HTTP)。当 Effect 完成时,它会调用一个带有新负载的新操作(成功的操作或失败的操作),从而更新 Store 中的数据。
@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' }))
);
}
Run Code Online (Sandbox Code Playgroud)
在此示例中,登录的 Effect 侦听LOGIN操作。当LOGIN动作发生时,它使用动作的负载并执行 HTTP POST。当 HTTP POST 返回时,它要么LOGIN_SUCCESS使用有效负载的 json 响应调用操作,要么返回LOGIN_FAILED操作。
这样,您的 Store 始终保持在任何副作用(例如 HTTP)的循环中。如果一个组件更新了数据库中的一条记录,则 Effect 应该通知 Store,以便所有订阅该数据的组件都获得更新的数据。
希望有帮助。
| 归档时间: |
|
| 查看次数: |
1743 次 |
| 最近记录: |