更新 NGRX/Redux 存储对象属性

Question

我的 Angular 应用程序中的场景是，用户单击 "ShowDetails"，它应该显示一个表单，其中包含我在启动时已经加载的所选项目的详细信息，但不是详细信息和我不想加载所有细节 OnInit。

我能够成功发送一个动作，但我想要一个效果，它应该获取 id（我假设来自商店），进行 http 调用，获取该项目的详细信息并将其添加为a 属性到主项目，以便后续调用不会再次转到该服务。这些我都能做到

我的问题是我不确定如何在不改变商店中的原始对象（我知道我不应该改变）的情况下更新商店中主对象的属性，所以后续调用不会不要再次调用该服务。或者如何在 Effect 到达 Reducer 进行最终处理之前更新 Effect 中的属性？理想情况下，我想在详细信息之前显示一个带有加载图标的空表单页面 returns。

Answer 1

您的效果需要选择请求的数据是否已经在存储中，只有当它不在时，它才应该发起一个 AJAX 请求来获取它。在这两种情况下，一旦数据准备就绪，就派发一个 "data ready" 动作。

这是我过去的做法：

export class MyEffects {
  constructor(private store$: Store<fromStore.AppState>,
    private action$: Actions,
    private backend: MyService,
  ) { }

  @Effect()
  fetchData$ = this.action$.ofType<fromActions.FetchDataAction>(fromActions.FETCHDATA).pipe(
    withLatestFrom(this.store$.select(x => x.main.cacheMap)),
    switchMap(([action, cacheMap]) => this.fetchData(action.id, cacheMap)),
    map(r => r new fromActions.DataReadyAction(r)),
  );

  fetchData(id: string, cacheMap: { [key: string]: Item }): Observable<Item> {
    if (!cacheMap[id]) {
      return this.backend.getData(id);
    } else {
      return of({ ...cacheMap[id] });
    }
  }
}

注意几点：

效果 class 构造函数已将存储注入其中。
效果本身使用withLatestFrom获取状态的最新副本。
fetchData 函数根据 cacheMap 变量中请求的键的存在来选择是立即发送 AJAX 请求还是 return商店。

当DataReady动作减少时，新的项目被放置在状态的缓存映射中，这样后续的FetchData动作就不会重新请求它。

更新 NGRX/Redux 存储对象属性

Update NGRX/Redux store object property

angular

redux

ngrx

ngrx-effects

更新 NGRX/Redux 存储对象 属性

Update NGRX/Redux store object property

angular

redux

ngrx

ngrx-effects

更新 NGRX/Redux 存储对象属性