标签: ngrx

我正在使用ngrx.我收到了错误

无法读取未定义的属性"类型"

这是我的代码的一部分:

@Effect() foo$ = this.actions$
    .ofType(Actions.FOO)
    .withLatestFrom(this.store, (action, state) => ({ action, state }))
    .map(({ action, state }) => {
      if (state.foo.isCool) {
        return { type: Actions.BAR };
      }
    });

我有一个非常简单的效果,它产生一个http请求,并在完成后调度一个动作.

HTTP请求不断被取消并反复重新制作.

最初我以为是导致问题的switchMap(取消了observable)所以我尝试使用mergeMap(相同的结果).

下面是我的效果代码.

signIn$ = this.actions$
  .ofType(ACTIONS.AUTH.SIGN_IN)
  .map(toPayload)
  .map(payload => toInput(payload))
  .switchMap(input => this.http
      .post<Output>(`${GLOBALS.endpoint}/auth/authenticate`, input)
      .map(output => ({ type: ACTIONS.APP.PUSH_NOTIFICATION, payload: "test" }))
      .catch(error => of(createAction(ACTIONS.APP.LOG_EXCEPTION, error)))
  );

上面的代码编译没有错误,并按预期工作,除了它不断取消和重新生成http请求的事实.

我不知道它是否重要,但我使用的是HttpClient(@ angular/common/http),而不是@ angular/http.

任何建议将不胜感激!

我正在使用Angular 2和Ngrx以及Angular Material.是否所有UI更改(如下拉列表或对话框)应该存储在哪里？

例如:

<button md-button [mdMenuTriggerFor]="menu">Menu</button>
<md-menu #menu="mdMenu">
  <button md-menu-item>Item 1</button>
  <button md-menu-item>Item 2</button>
</md-menu>

我应该支持商店下拉吗？

下一个例子:

<md-sidenav-container class="example-container">
  <md-sidenav #sidenav class="example-sidenav">
    Jolly good!
  </md-sidenav>

  <div class="example-sidenav-content">
    <button type="button" md-button (click)="sidenav.open()">
      Open sidenav
    </button>
  </div>

</md-sidenav-container>

我可以使用open方法吗？也许我应该创建组件,将partnav包装在仅在输入上运行的组件中Input() open;？

我正在写信请教您。我们构建基于商店的角度应用程序，需要翻译。要求使用官方的角度i18n方法，尽管我不知道如何将翻译与商店中的值连接起来。甚至有可能，是否有人对此有任何经验，还是我应该立即使用ngx-translate库之类的解决方案？我必须说我已经研究了很多，但是还没有找到可以理解的答案（我是大三，对我来说，要掌握所有优点和缺点以及可能的一切都非常困难）。因此，如果您有任何适用经验，我的要求是分享您的知识。提前致谢！

我正在开发一个相对简单的应用程序,我想了解更多有关ngrx,redux和angular 2的信息.

我将简要介绍一下我的app,appstate和reducer的设置.

在我的应用程序中,我想使用webgl框架在我的屏幕上绘制某些对象(网格).我想通过创建具有这些网格属性的简单对象,并通过ngrx存储添加网格,并将其保存在应用程序状态中.每当添加"网格"时,我想使用ngrx sideeffects在屏幕上使用可访问webgl框架的服务绘制网格.

我的(简化)appstate看起来像这样:

export interface AppState {
    meshList: MeshListReducer.MeshListState
}

要添加网格,我创建了以下reducer函数:

case MeshActions.ADD_MESH: {
    return Object.assign({
        entities: [meshAction.payload, ...state.entities]
    });
}

case MeshActions.ADD_MESH_SUCCESS:
case MeshActions.UPDATE_MESH: {
   // This reducer function is only being called once, see below for further explanation.
   return Object.assign({}, state, {
        entities: state.entities.map(meshItem => {
            // If we can find a mesh with this id, use the sub reducer to update it.
            if (meshItem.uuid === meshAction.payload.uuid)
                 return meshSubReducer(meshItem, meshAction);

            return meshItem;
            })
        });
    } …

我正在使用NGRX和UI的Angular材质组件开发Angular应用程序。

一个组件使用手风琴折叠式显示扩展面板列表。这些扩展面板包含信息以及操纵这些信息的方法。

操纵信息后，将向根组件发出一个事件，并向存储分派一个操作，从而修改状态。当商店通过选择器触发这些更改时，订阅商店的根组件会将更改传递到包含mat手风琴和mat-expansion-panels的组件。

问题：发出变更后，席子手风琴的所有扩展面板都关闭了。由于用户应该能够进行进一步的更改，因此这是一个与用户体验有关的非常大的问题。

编辑1： 我将扩展面板的扩展输入设置为truewith <mat-expansion-panel [expaned]="true" ... >，并且行为更改为始终打开所有扩展面板进行任何更改。因此，我认为当输入更改时，似乎重新创建了整个组件。可能是因为我订阅了上面的组件，并且只传递了新数据。请看我是否可以通过在输入中传递可观察值来更改此设置。

编辑2：我派生了ibenjelloun的stackblitz应用程序，并添加了2美分，该示例显示了无法正常工作的行为：https : //stackblitz.com/edit/stackoverflow-49691295-qulg9d我发现了，删除了模仿ngrx的行行为是可行的，但是用折线也无法显示根组件中的示例（糟糕，这应该是我的：看，我不尝试不可能的示例）。这让我有些惊讶，因为我正在使用的应用程序也以相同的方式设置了acordion，但确实可以正常工作。

由于这是工作，我无法显示任何导致问题的原始代码。

我有一个使用Angular 6和NgRX 6的角度应用程序。

我有一个身份服务器，通过隐式流程与之对话，一旦重定向回我的应用程序，我的令牌响应等仍在导航栏中。

我想从网址中清除该片段，并继续沿我的路线行驶。

例如

http://foo.com/bar/boo#key=value

完成并离开后，我想清除此问题

http://foo.com/bar/boo

我正在处理如下效果

 @Effect({ dispatch: false })
  persistSessionTokens$: Observable<void> = this.actions$.pipe(
    ofType<ActionWithPayload>(SET_SESSION_TOKENS),
    map(action => action.payload),
    tap(tokens => {
      persist(ID_TOKEN_STORAGE_KEY, tokens[ID_TOKEN_STORAGE_KEY]);
      persist(ACCESS_TOKEN_STORAGE_KEY, tokens[ACCESS_TOKEN_STORAGE_KEY]);

      const url = this.router.url;

      this.router.navigate([url], { replaceUrl: true });
    }),
    catchError(error => of({ type: SET_TOKEN_FAILURE, payload: error }))
  );

但这将我重定向到 http://foo.com/bar/

在这种情况下，我的应用程序的基本href为 bar

boo 是我的房客的名字，因此在URL中保留此结构很重要。

我有一个像这样的组件user-personal-details.component.ts.与user 存储保持同步Store

@Select() user$: Observable<IUser>;
user:IUser;
ngOnInit() {
  this.user$.subscribe((user:IUser)=>{
    this.user = user;
    this.form.form.patchValue(user);//LINE A: fill the form using user data
  };
}

此组件有一个表单来填充有关的详细信息user.没有保存按钮,每次这些组件的任何用户类型,我通过检测更改

this.form.valueChanges.debounce(2000).subscribe((formData)=>{
    this.store.dispatch(new UpdateUser(formData));//Line B
})

并调度一个Action名为UpdateUser存储更改Store.

问题:

问题是当用户输入内容时,它会调度操作来更改商店中的用户(B行).由于组件user在商店中订阅,因此将再次调用A行.这反过来,修补因此调用形式B线.从而使它成为一个循环.

避免这种情况的一种方法是在表单更改时改变状态,因为这不会触发操作,因此不会调用行B. 但我认为在Redux中不推荐这样做.

有人可以建议一个更优雅的方式来处理这个问题吗？

注意:我正在使用NGXS,但我想它不应该有所作为.

编辑:由于问题被低估了,我对这个问题进行了大量编辑,以使问题最小化.

我已在此处输入链接说明中上传了整个项目

每次我运行相同的代码并得到以下错误后，都会收到很多错误提示：

`node_modules/@ngrx/store-devtools/src/actions.d.ts（18,21）中的错误：错误TS1039：在环境中不允许初始化。

node_modules/@ngrx/store-devtools/src/actions.d.ts（22,21）：错误TS1039：在环境上下文中不允许初始化。

node_modules/@ngrx/store-devtools/src/actions.d.ts（26,21）：错误TS1039：在环境上下文中不允许初始化。

node_modules/@ngrx/store-devtools/src/actions.d.ts（31,21）：错误TS1039：在环境上下文中不允许初始化。

node_modules/@ngrx/store-devtools/src/actions.d.ts（36,21）：错误TS1039：在环境上下文中不允许初始化。

node_modules/@ngrx/store-devtools/src/actions.d.ts（40,21）：错误TS1039：在环境上下文中不允许初始化。

node_modules/@ngrx/store-devtools/src/actions.d.ts（44,21）：错误TS1039：在环境上下文中不允许初始化。

node_modules/@ngrx/store-devtools/src/actions.d.ts（51,21）：错误TS1039：不允许初始化程序node_modules/@ngrx/store-devtools/src/actions.d.ts（56,21） ：错误TS1039：不允许初始化

node_modules/@ngrx/store-devtools/src/actions.d.ts（61,21）：错误TS1039：不允许初始化

node_modules/@ngrx/store-devtools/src/actions.d.ts（66,21）：错误TS1039：不允许初始化

node_modules/@ngrx/store-devtools/src/actions.d.ts（71,21）：错误TS1039：不允许初始化

node_modules/@ngrx/store-devtools/src/actions.d.ts（76,21）：错误TS1039：不允许初始化

我？wdm ?：编译失败。`

有机会在不更改代码的情况下成功完成项目编译，但是又有另一个错误 Uncaught Error: Can't resolve all parameters for CoinEffects: (?, [object Object]).

经过多次搜索后，我发现它是关于循环依赖关系的，它试图解决，但是徒然是关于依赖关系或其他问题！！？

我正在学习NgRx,但我不明白为什么实体选择器触发动作.我一直在寻找原因,但我没有找到任何东西.也许我错过了一些NgRx/Entity的基础知识.

这是我的演示代码:

selectors.ts

export const selectHeroState: MemoizedSelector<object, HeroesState> = createFeatureSelector<HeroesState>('heros');
export const selectHeroes: (state: object) => Hero[] =  heroAdapter.getSelectors(selectHeroState).selectAll;

component.ts

ngOnInit() {
 //this.store$.dispatch(new GetAll()); I thought this line of code was nescessary to fetch all data from store... 
 this.heroes$ = this.store$.select(selectHeroes); //but i just need this one as it triggers the Get All action
}

我希望能很好地解释我的问题.提前致谢.