标签: 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？

我正在订阅组件构造函数中的store属性

constructor(private someService: SomeService){
        someService.someObservable.subscribe((data: Some)=> {
            this.some = data;
            console.log('changed');
        });
}

在服务中,构造函数如下所示:

constructor(private store: Store<any>){
        this.someObservable = <Observable<{}>>store.select('some');
}

我一直在改变这个对象的状态,但是日志只出现一次.还有一点奇怪的是,我正在this.some我的模板中直接访问该属性(没有async管道),它完全更新!看起来该this.some属性正在更新,但next()订阅中的功能不起作用.

帮助任何人？谢谢!

我正在尝试将我的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 …

我的问题涉及从ngrx商店调度和选择.

让我们看看官方示例应用程序中的以下代码:

export class CollectionPageComponent implements OnInit {
  books$: Observable<Book[]>;

  constructor(private store: Store<fromBooks.State>) {
    this.books$ = store.select(fromBooks.getBookCollection);
  }

  ngOnInit() {
    this.store.dispatch(new collection.Load());
  }
}

我想了解选择调度ngOnInit和选择的constructor动机是什么.

有人可以提供解释吗？

PS顺便说一下,上面是ngrx示例应用程序的示例代码,可以在这里找到:https://github.com/ngrx/platform/blob/master/example-app/app/books/containers/collection-page .TS

最近推出了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 创建器功能构建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
  // …

我有一组静态数据,一组国家,用于某些组件.这些数据加载到ngOnInit()这些组件中,但我想加载它们只是在我第一次请求数据时(存储是空的).每次我加载组件时我只想使用商店中的数据而不"刷新"它.

如何使用ngrx实现这一目标？

我正在使用效果.这是我的代码的样子:

组件:

export class EditPageComponent implements OnInit {
countries$: Observable<Country[]>

constructor(private store: Store<fromContacts.State>) {
    this.countries$ = store.select(fromContacts.getCountriesEntities);
}
ngOnInit() {
   this.store.dispatch(new countries.Load());
}

效果:

    @Effect()
      loadCollection$: Observable<Action> = this.actions$
        .ofType(countries.LOAD)
        .switchMap(() =>
          this.countriesService
        .getCountries()
        .map((countriesList: Country[]) => {
          return new countries.LoadSuccess(countriesList);
        })
        .catch(error => of(new countries.LoadFail(error)))
  );

还原剂:

case countries.LOAD_SUCCESS: {

      const countriesList: Country[] = action.payload;
      const reducedCountries: { [id: string]: Country } = countriesList.reduce((countrs: { [id: string]: Country }, countr: Country) => {
        return Object.assign(countrs, …

我阅读了ngrx商店关于选择器的文档,并且需要弄清楚如何创建选择器以便按项目ID选择一个项目.当我从selectAllItems选择器中获取所有项目时,我已经可以将此作为商店订阅的一部分,但我需要弄清楚如何从商店中的项目列表中选择特定项目.我的主要原因是createSelector提供了我喜欢的性能提升.

这是我的代码:

import { AppState, Item } from '../../shared/models/index';
import { createSelector } from '@ngrx/store';

export const selectItems = (state: AppState) => state.eventsState;

export const selectAllItems = createSelector(selectItems, (allItems: { items: Item[] }) => {
  if (allItems && allItems.items) {
   return allItems.items.filter((item: Item) => (!item.active && !item.closed));
  } else {
    return allItems.items;
  }
});

然后在我的控制器中我按ID过滤以获得所需的项目:

this.store.select(selectors.selectAllItems)
  .filter(data => data !== null)
  .subscribe(allItems => {
    this.item = allItems.filter(item => {
      return item.id === this.navParams.data.id;
    }); …

我们有一个有角度的项目在工作(待开发,还没有开始).它非常复杂,数据流复杂.此外,我们的应用程序中有两种用户.经理和用户.这些用户将看到类似的视图,但每个用户都有一些不同的自定义视图.经理可以按照您的想象获得更多功能.为了以可扩展的方式管理这个相当大而复杂的应用程序,我们遵循NX模式.即单个回购中的多个应用程序.最后,在单个回购中,我有以下应用程序.

大部分开发将在commonapp中完成,不同的视图和定制将分别在两者mngr-app和user-app.

我们也考虑ngrx在我们的国家管理申请中使用.我已经看过多个如何做到这一点的示例和教程.到目前为止一切都还可以.这部分仅供参考.

我们的问题在此之后开始.我们的业务团队还希望我们使用包含Web应用程序的Web视图开发iOS和Android应用程序(我忘了提到它是一个响应式Web应用程序).因此,我们所做的一切都将通过网络视图发送给移动用户.但是,业务团队也希望我们为移动应用程序开发一些自定义本机视图.

我们来看看下面的例子:(这是来自ngrx的例子)

当用户单击Add Book to Collection按钮时,[Collection] Add Book会将操作类型分派给商店,效果将按如下方式处理:

@Effect()
addBookToCollection$: Observable<Action> = this.actions$
  .ofType(collection.ADD_BOOK)
  .map((action: collection.AddBookAction) => action.payload)
  .switchMap(book =>
    this.db.insert('books', [ book ])
      .map(() => new collection.AddBookSuccessAction(book))
      .catch(() => of(new collection.AddBookFailAction(book)))
  );

这是Web应用程序的正常流程.

我们的业务团队希望我们为移动应用程序构建某种自定义逻辑,以便当用户在移动应用程序(iOS或Android)中导航到此页面时,不会将书籍添加到集合中,而是打开本机页面用户将在该本机页面上执行操作.我的意思是他们希望Web应用程序在移动应用程序中出现时表现不同.我可以if(window.nativeFlag === true)在Web应用程序中实现这一点.但是,这只是我们想要避免的肮脏黑客.因为,我们正在使用ngrx,rxjs我们觉得这可以用Observables rxjs和Actions 来完成ngrx.

到目前为止我们尝试的是暴露store和 …