标签: ngrx

我想在我的angular 2应用程序中安装@ ngrx/store模块.我正在使用npm install并收到以下错误:

npm ERR! peerinvalid The package rxjs@5.0.0-beta.6 does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer @angular/core@2.0.0-rc.0 wants rxjs@5.0.0-beta.6
npm ERR! peerinvalid Peer @angular/http@2.0.0-rc.0 wants rxjs@5.0.0-beta.6
npm ERR! peerinvalid Peer angular2@2.0.0-beta.16 wants rxjs@5.0.0-beta.2
npm ERR! peerinvalid Peer @ngrx/store@1.5.0 wants rxjs@5.0.0-beta.6

这是否意味着我必须升级我的angular2模块,因为它需要更低版本的rxjs@5.0.0-beta.2？

我正在尝试将我的ngrx状态封装在共享服务类中,以从我的组件中抽象出实现细节.

在app.module.ts中注册的示例服务类 providers

@Injectable()
export class PatientService {

  state: Observable<PatientState>;

  constructor(
    private store: Store<AppState>,
  ) {
    this.state = store.select<PatientState>('patients');
  }

}

我已经验证了我的操作,reducer和effect正在按预期工作,但是,当我订阅组件中的服务状态时,它返回undefined.

使用共享服务的示例组件订阅:

@Component({
  ...
})
export class DashboardComponent implements OnInit {

  constructor(
    private patientService: PatientService,
  ) {}

  ngOnInit(): void {
    // dispatches action to load patient from API
    this.patientService.loadPatient();

    this.patientService.state.subscribe(patientState => {
        console.log('patientState', patientState);
        // Does not work. Logs undefined.
    });
  }

}

如果我直接订阅商店,它会按预期工作.

例:

@Component({
  ...
})
export class DashboardComponent implements OnInit {

  constructor(
    private patientActions: …

我正在学习redux模式并使用角度为2的ngrx.我正在创建一个具有以下形状的示例博客站点.

export interface BlogContent {
  id: string;
  header: string;
  tags: string[];
  title: string;
  actualContent: ActualContent[];
}

我的减速机和动作如下:

import { ActionReducer, Action } from '@ngrx/store';
import * as _ from 'lodash';
export interface ActualContent {
  id: string;
  type: string;
  data: string;
}

export interface BlogContent {
  id: string;
  header: string;
  tags: string[];
  title: string;
  actualContent: ActualContent[];
}

export const initialState: BlogContent = {
  id: '',
  header: '',
  tags: [],
  title: '',
  actualContent: [],
};

export const ADD_OPERATION = 'ADD_OPERATION';
export const …

我正在使用带有Angular和ngrx/store和ngrx/effects的redux风格的状态管理设计.每当我不从效果中返回动作时,我都会收到错误:

Cannot read property 'type' of undefined

我研究了这个问题,发现在榆树架构中有一种称为"noop"的动作,当你不想用你的效果链接另一个动作时,你可以调用任何东西.在任何地方召唤这种noop行动对我来说都是非常重复的.我想知道这是否是一个不好的做法.有没有理由你不能产生不返回动作的效果？效果的意图总是有1个动作引发另一个动作吗？我想知道我是否误解了如何使用效果.

谢谢!

可以影响像Promise.all这样的两个动作吗？例:

@Effect()
pulic addUser() {
   return this.actions$.ofType(user.ADD)
      .switchMap(() => {
         return this.userService.add();
      })
      .map(() => {
         return new user.AddSuccessAction();
      });
}

@Effect()
pulic addUserOptions() {
   return this.actions$.ofType(userOptions.ADD)
      .switchMap(() => {
         return this.userOptionsService.add();
      })
      .map(() => {
         return new userOptions.AddSuccessAction();
      });
}

@Effect()
public complete() {
   return this.actions$.ofType(user.ADD_SUCCESS, userOptions.ADD_SUCCESS)
      // how to make it works like Promise.all ?
      .switchMap(() => {
         return this.statisticService.add();
      })
      .map(() => {
         return new account.CompleteAction();
      });
}

更新 我想要实现的是Promise.all的simillar行为.如何并行调度两个效果,等待所有效果都解决,然后发出第三个动作.像https://redux-saga.js.org/docs/advanced/RunningTasksInParallel.html这样的承诺它是非常明显的:

Promise.all([fetch1, fetch2]).then(fetch3);

是否有可能在ngrx /效果？或者在ngrx /效果中它是错误的方式？ …

最近推出了NGRX/Entities:

https://medium.com/ngrx/introducing-ngrx-entity-598176456e15 https://github.com/ngrx/platform/tree/master/example-app

并且因为它们是以适配器处理(读取:单个)映射数据结构的方式制作的,并且在初始化时获得剩余的reducer状态,我想知道......

是否可以在一个减速器/适配器中容纳多个实体？接口说没有,但可能有黑客或计划未来？如果我在一个reducer中已经有多个地图怎么办？我是否被迫将其拆分或避开实体功能？

以下答案是有效的.(在这个例子中,延迟加载但不一定是)模块的另一种方法是将reducers与ActionReducerMap结合使用:

在你的lazy.module.ts中:

export interface LazyState {
  lazyAState: LazyAState;
  lazyBState: LazyBState;
}

export const lazyReducers: ActionReducerMap<LazyState> = {
  lazyA: lazyAReducer,
  lazyB: lazyBReducer
};

export interface AppState extends forRoot.AppState {
  lazy: LazyState;
}

@NgModule({
  imports: [
    LazyRoutingModule,
    StoreModule.forFeature('lazy', lazyReducers),
    EffectsModule.forFeature([LazyEffects])
  ]
})
export class LazyModule {
  static forRoot() {
    return {
      ngModule: LazyModule,
      providers: [],
    };
  }
}

在lazy.selectors.ts中(从reducer文件导入适配器):

export const getLazyState = createFeatureSelector<LazyState>('lazy');

const getLazyAState = createSelector(getLazyState, (state: LazyState) => state.lazyAState);
const getLazyBState = createSelector(getLazyState, (state: …

在组件中,我们使用ngrx选择器来检索状态的不同部分.

public isListLoading$ = this.store.select(fromStore.getLoading);
public users$ = this.store.select(fromStore.getUsers);

的fromStore.method是使用NGRX创建createSelector方法.例如:

export const getState = createFeatureSelector<UsersState>('users');
export const getLoading = createSelector(
  getState,
  (state: UsersState) => state.loading
);

我在模板中使用这些observable:

<div class="loader" *ngIf="isLoading$ | async"></div>
<ul class="userList">
    <li class="userItem" *ngFor="let user of $users | async">{{user.name}}</li>
</div>

我想写一个测试,我可以做以下事情:

store.select.and.returnValue(someSubject)

能够更改主题值并再次测试组件的模板这些值.

事实上,我们很难找到一种合适的方法来测试它.如何编写我的"andReturn"方法,因为该select方法在我的组件中被调用两次,有两个不同的方法(MemoizedSelector)作为参数？

我们不想使用真正的选择器,所以模拟一个状态,然后使用真正的选择器似乎不是一个合适的单元测试方式(测试不会被隔离,并将使用真实的方法来测试组件行为).

我尝试使用Angular实现ngrx/Store但是我总是在控制台中收到以下错误,并且没有显示任何内容:

"TypeError:无法在ObserveOnSubscriber.scheduleMessage中读取未定义的属性'schedule'"

顺便说一下我使用的方式:

Angular CLI:1.7.4
Angular:5.2.11

由于我是ngrx/Store的新手,我试图实现以下示例:https://malcoded.com/posts/angular-ngrx-guide

即使我尝试了其他示例,但我总是得到相同的上述错误.

我的商店中有一个非常简单的状态：

const state = {
 records: [1,2,3],
};

我有一个记录选择器：

export const getRecords = createSelector(getState, (state: State) => state.records));

我现在想要的是具有单独的选择器，用于按索引获取每个记录。为此，我想以这种方式创建一个带有道具的通用选择器：

export const getRecordByIndex = createSelector(
getRecords,
(state: State, { index }) => state.records[index]),
);

然后，创建几个特定的​​选择器，例如：

export const getFirstRecord = createSelector(
getRecordByIndex(/* somehow pass index = 0 to this selector */),
(firstRecord) => firstRecord),
);

但是我没有提到如何在createSelector方法中使用参数将参数传递给带有选择器的选择器。可能吗？

目前，我正在尝试使用新的NgRX 创建器功能构建Angular + NgRX 8应用程序。但是，当我将其构建用于生产时，会出现以下错误：

装饰器不支持函数调用，但在“ reducers”中调用了“ createReducer”。

在开发模式下，完全没有问题。

请求减少器看起来像

export interface State extends EntityState<Request> {
  loading: boolean;
  error: any;
}
export const initialState = adapter.getInitialState({
  loading: false,
  error: null
});

export const reducer = createReducer(
  initialState,
  on(RequestsActions.loadRequestsSuccess, (state, { requests }) => adapter.addAll(requests, {...state, loading: false})),
  on(RequestsActions.loadRequestsFailed, (state, { error }) => ({...state, error, loading: false})),
  on(RequestsActions.deleteRequestSuccess, (state, { id }) => adapter.removeOne(id, state))
);

并与其他reducer一起包含在index.ts文件中

export const reducers = {
  requests: reducer
  // …