当过滤器更改或使用 NGRX 创建新实体时更新 redux 状态

Question

我正在使用 Angular 9 和 NGRX 创建一个应用程序，其中我有一个 post class:

    class Post { 
      id: number; 
      title: string; 
      category: string;
     }

ParentComponent 显示 post 的第 1 页及其子页，ChildComponent 显示 post 的第 1 页 category=book。

页面或类别随时可能更改，或者可能创建新的 post ...

数据库很大，所以我无法将所有 post 加载到 Angular 应用程序中。

我有一个 PostService 方法 GetByQuery:

    class PostService {
      GetByQuery(category: string, page: number) : Observable<Post[]> {
        // implementation 
      }
    }

如果 page 或 category 发生变化或者创建了新的 post，如何更新状态？

Answer 1

遗憾的是，所提供的信息还不够，因为它没有显示您拥有哪些操作和 reducer。

通常对于这样的事情，当我们需要做一些额外的事情而不是减少人们使用 effects 的动作时，您可以听取 page、category 或新的变化post 并引发其他操作，例如 reload 数据。

在这里您可以找到所有信息：https://ngrx.io/guide/effects

一个例子（它是带有装饰器的旧例子，目前应该使用 createEffect 函数）。

@Injectable()
export class ActivationAdminEffects {
    /**
     * Sending activation by admin request and processing its result.
     */
    @Effect()
    public readonly activate$: Observable<Action> = this.actions$.pipe(
        ofType(ActivationAdminActions.Activate), // <- waiting this action

        // doing side things we need
        mergeMap((action: ActivationAdminActionsActivate) =>
            this.http.post(this.urlActivationAdmin, action.data).pipe(
                mergeMap(() => {

                    // dispatching a new action once we are done.
                    return of(new ActivationAdminActionsActivateSuccess());
                }),
                catchError(
                    (error: HttpErrorResponse): Observable<Action> => {
                        if (error.status === 404) {

                            // an expected error and dispatch of related action
                            return of(new ActivationAdminActionsActivateFailure());
                        }
                        return throwError(error);
                    },
                ),
            ),
        ),
    );

    protected readonly urlActivationAdmin: string = `${environment.urlApi}user/activation-admin`;

    constructor(protected readonly actions$: Actions, protected readonly http: HttpClient) {}
}

当过滤器更改或使用 NGRX 创建新实体时更新 redux 状态

Update redux state when filter changes or new entitiy is created using NGRX

redux

ngrx

angular

angular9