标签: ngrx

我将模板中的异步管道用于所有存储选择值，因为它会自行进行所有清理（包括取消订阅）。

但是，当我在auth gaurd中手动订阅一个值时，我需要取消订阅吗？如果是，那么最好的方法是什么？

@Injectable()
export class AuthGaurd implements CanActivate{

constructor(
    private store: Store<fromRoot.State>,
    private router: Router
){}

canActivate(){
    this.store.select(getLoggedInState).subscribe(res => {
        if(res){
            return true
        }else {
            this.router.navigate(['/login']);
        }
    });
        return false;
    }
}

有没有办法将参数传递给ngrx选择函数？

以下是我的用例:

我正在维护商店中的评论列表.

我写了一个组件来代表一个评论.因此,一个CommentComponent知道组件对象的id

每条评论都会有像LikeBy,reportedBy,...等属性.在UI中,我使用*ngFor显示所有组件

现在我希望我的CommentComponent只使用组件的id订阅一个注释对象.

现在我正在订阅顶级组件中的所有注释,并将每个注释作为输入传递给CommentCompoent.

当前的方法并不干净,因为角度变化检测策略(即使我使用onPush)必须为所有注释呈现DOM,即使只有一个注释发生变化.

感谢我可以将注释id传递给选择器函数的任何建议,以便每个CommentComponent只能订阅一个注释.

在此先感谢Sudhakar

我需要向 API 发送一个 put 请求，ngrx/effect但该请求需要 id 和内容，以便 MongoDB 能够找到帖子。

这是代码，我尝试设置两个操作有效负载：

export class UpdatePost implements Action {
    readonly type = UPDATE_POST

    constructor(public payload: string & Post ) { }
}

这是效果：

@Effect() 
    editPost$: Observable<Action> = this.actions$
    .ofType(PostActions.UPDATE_POST)
    .map((action: PostActions.UpdatePost) => action.payload)
    .switchMap((?) => {
        return this.postService.editPost(id, post);
    })
    .map(editedpost => ({type: PostActions.UPDATE_POST_SUCCESS, payload: editedpost}))
}

editPost()需要两个参数：id 和 content。

我想我的操作有效负载应该以其他方式设置，我是新手，ngrx所以欢迎提出建议。

我有simle特效类,必须从Firebase获取一些数据并发送新动作.

@Injectable()
export class TripsEffects {

     constructor(private actions$: Actions, private afAuth: AngularFireAuth ) {}

     @Effect()
     loadTrips$ = this.actions$.ofType(TripsActionsTypes.LOAD_TRIPS)
         .pipe(
             switchMap(() => {
                 return this.afAuth.authState.pipe(
                     map(user => new LoadTripsSuccess(user))
                 );
            })
         );
}

但我得到错误Actions must have a type property.当用户登录时,它们被重定向到Trips页面,而在Trips组件中,我将调度一个动作来加载行程.这是我的行动:

export enum TripsActionsTypes {
    LOAD_TRIPS = '[Trips] Load Trips',
    LoadTripsSuccess = '[Trips] Load Trips Success',
    LoadTripsFailure = '[Trips] Load Trips Failure'
}

export class  LoadTrips implements Action {
    type: TripsActionsTypes.LOAD_TRIPS;
}

export class  LoadTripsSuccess implements Action {
    type: TripsActionsTypes.LoadTripsSuccess;
    constructor(public …

在我的 Reducer 中，我试图更新字典集合中保存的数组中对象的属性，但它不起作用，我不知道为什么。我的状态的 results 属性是一个键/值对的字典，值是一个数组。

我尝试使用 map 函数创建一个新数组，但我的结果和状态没有更新。这是我的代码：

 case LOAD_SUCCESS: {
      const form = (action as LoadSuccessAction).form;

      return {
         results: {
           ...state.results,
           ...state.results['FORMS'].map(item => 
             item.id === form .id
              ? {...item, 'categories': form.categories}
              : item)           
         },    
        loading: false,
        loaded: true
      };
    } 

我究竟做错了什么？

我有要填充到表单中的数据。我在 Angular 6 中使用反应式形式。

演示应用程序

我有其中有edit按钮的项目列表。单击edit我正在显示的按钮edit component

我想填充或设置输入字段中的所有值。我现在在 obj 中有数据我想以表格形式填充它

这是我的代码 https://stackblitz.com/edit/angular-pkf4wa?file=src%2Fapp%2Fedit%2Fedit.component.ts

在编辑组件上

ngOnInit() {
  this.product$ = this.store.pipe(select(fromProduct.getSelectedProduct))
  //       .subscribe((res)=>{
  //    console.log('ssssss');
  // console.log(res)
  //       },()=>{
  //         console.log('dddd')
  //       })
}

编辑按钮点击

editProduct(product: Product, item) {
  const editProduct: EditProductInterface = {
    product: product,
    selectedIndex: item
  }
  this.store.dispatch(new productActions.EditProduct(editProduct));
  this.router.navigate(['edit'])
}

我有一个包含JSON的状态，如下所示：

{id: "1", name: "ig1", description: "ig 11"}
{id: "5", name: "hhh", description: "hhh"}
{id: "6", name: "ggg", description: "hhh"}

我需要从状态数组中选择ID = 1的数据

如何使用NGXS状态选择器完成此操作

以及如何在组件中访问它？

我的状态如下

食谱

0 : {id: "3", name: "Cake", image: "index.jpg", description: "Lorem Ipsum is 
simply dummy text of the printing a…ldus PageMaker including versions of 
Lorem Ipsum.", ingredients: "ig 1-1kg,ig 123-4kg"}
1 : {id: "16", name: "gfdg", image: "Chrysanthemum.jpg", description: 
"fhfgh", 
ingredients: "gdfg-4sfhs,ig 1-1kg"}
2 : {id: "17", name: "hfgh", image: "Jellyfish.jpg", description: "ghgfh", 
ingredients: …

我正在尝试调度相对于组件路线的路由器商店导航操作。路由跟踪日志显示，用于导航的相对路径是应用程序路径而不是组件路径。

 return of(
        new routerActions.Go({
          path: ['./', payload.rootPath],
          extras: { relativeTo: this.route },
        }),
      );

 constructor(
    private actions$: Actions,
    private route: ActivatedRoute,
  ) {}

我正在ActivatedRoute效果模块构造函数中注入，这似乎是这里的问题。我如何才能在组件之外获取激活的路线并将其传递给导航动作？

我有这种效果，我正在尝试使用计时器每x秒轮询一次数据。但是我不知道计时器应该如何与数据流交互。我尝试在顶部添加另一个switchMap，但随后无法将操作和有效负载传递给第二个switchmap。有任何想法吗？

我看了这篇文章，但情况有所不同。我正在通过需要访问的操作传递有效负载，并且正在使用ngrx 6。

@Effect()
getData = this.actions$
    .ofType(appActions.GET_PLOT_DATA)
    .pipe(
        switchMap((action$: appActions.GetPlotDataAction) => {
            return this.http.post(
                `http://${this.url}/data`,
                action$.payload.getJson(),
                {responseType: 'json', observe: 'body', headers: this.headers});
        }),
        map((plotData) => {
            return {
                type: appActions.LOAD_DATA_SUCCESS,
                payload: plotData
            }
        }),
        catchError((error) => throwError(error))
    )

我有 2 个名为 METADATA_SUCCESS_ACTION_1 和 SUCCESS_ACTION_2 的操作。我如何等待这两个操作完成，然后订阅合并数据。

this.actions
  .pipe(
    ofType(METADATA_SUCCESS_ACTION_1),
    take(1)
  )
  .subscribe((data1: any) => {
    console.log(data1)
  });

this.actions
  .pipe(
    ofType(SUCCESS_ACTION_2),
    take(1)
  )
  .subscribe((data2: any) => {
    console.log(data2)
  });

我想等待两次成功发生，然后处理作为元数据和成功数据的数据