Question

我开始使用NgRx，但是对访问State中包含的数据有点迷失。我问了几个小时才问我的问题，因为我没有真正找到答案。

使用NgRx在列表上显示数据时，这非常好。我想更多地使用NgRx将我的应用程序的设置与我的SettingsState分组。

我想特别在我的SettingsState中： -API请求的基本网址， -列表中显示的行数：在API请求期间很重要，以限制要检索的数据。 -...

处于效果中时，如何直接检索重要参数以启动API请求？

我理解要恢复数据，有必要使用“选择器”获得“可观察”，这将使我在更改到达时立即得到通知。

但是，在这里我现在想要这些值而无需等待启动我的API请求。我该怎么办？

先谢谢您

Answer 1

正如您正确指出的那样，您应该使用选择器从您的商店访问数据。您可以在组件中使用选择器，也可以在效果中使用选择器。

看看这个示例效果：

@Injectable()
export class ElementEffects {
constructor (private store: Store<any>, private apiService: ApiService) {}

      @Effect()
      public yourEffect: Observable<Action> = this.actions$.pipe(
        ofType<yourActionClass>(ActionsEnum.YOUR_ACTION),
        withLatestFrom(this.store.pipe(select(selectSomethingFromTheStore))),
        concatMap(([action, selectedDateFromTheStore]) => this.apiService.doBackendCall(selectedDateFromTheStore, action.payload).pipe(
          map(([resultFromTheBackendCall, selectedDateFromTheStore]) => {
            // Do Stuff
          },
          catchError((error) => of(new FailureAction(error)))
          )
        ),
      );
}

通过“ withLatestFrom”，您可以向链中添加另一个可观察的。您将立即获得结果，并且可以使用它。

https://www.learnrxjs.io/operators/combination/withlatestfrom.html

Answer 2

谢谢您的回答

我将进一步研究RxJs运算符。我想我有点想念它。

但这不能完全解决我的问题。

在我的API请求启动的服务中，我需要检索基本URL以生成要使用的最终URL。这个网址目前很难。

@Injectable({
  providedIn: 'root'
})
export class MaterialService {
  private url = "https://example.com/v1/materials";

  constructor(private http: HttpClient) { }

  getMaterials () {
    return this.http.get (this.url).pipe (
      catchError (this.handleError)
    );
  }

  handleError (error: HttpErrorResponse): Observable<never> {
    return throwError (error.message);
  }
}

我希望我的设置处于Settings状态。

如何将选择器集成到上述独立服务中？

如何立即从状态恢复数据？

2 个答案: