标签: ngrx

NgRx:在单个效果中调度多个操作

我需要在调用 API 请求后分派多个操作。我目前正在使用此代码在 API 请求完成后分派一个操作:

 changeStatus$ = createEffect(() => 
  this.actions$.pipe(
    ofType(fromJtDetail.changeStatus),
    switchMap(action =>
      this.jtDetailService.changeStatus(action.entity,action.jobTicketId).pipe(
        map(res => fromJtDetail.statusChanged({changedStatus: action.entity.newStatus})),
        catchError(error => EMPTY)
))));
Run Code Online (Sandbox Code Playgroud)

在这个效果中调度更多的动作很重要,不能为此编写另一个效果。

rxjs ngrx ngrx-effects angular

19
推荐指数
2
解决办法
3万
查看次数

如何在ngrx/Store reducer中使用其他Angular2服务?

ngrx/Store和reducer都是新手.基本上,我有这个减速器:

import {StoreData, INITIAL_STORE_DATA} from "../store-data";
import {Action} from "@ngrx/store";
import {
  USER_THREADS_LOADED_ACTION, UserThreadsLoadedAction, SEND_NEW_MESSAGE_ACTION,
  SendNewMessageAction
} from "../actions";
import * as _ from "lodash";
import {Message} from "../../shared-vh/model/message";
import {ThreadsService} from "../../shared-vh/services/threads.service";

export function storeData(state: StoreData = INITIAL_STORE_DATA, action: Action): StoreData {


  switch (action.type) {

    case SEND_NEW_MESSAGE_ACTION:
      return handleSendNewMessageAction(state, action);

    default:
      return state
  }
}

function handleSendNewMessageAction(state:StoreData, action:SendNewMessageAction): StoreData {

  const newStoreData = _.cloneDeep(state);

  const currentThread = newStoreData.threads[action.payload.threadId];

  const newMessage: Message = {
    text: action.payload.text,
    threadId: action.payload.threadId,
    timestamp: new …
Run Code Online (Sandbox Code Playgroud)

dependency-injection redux ngrx angular

18
推荐指数
2
解决办法
1万
查看次数

Rxjs - .withlatestfrom的多个来源

我想合并来自多个observable的最新发射值,所以现在我正在使用.withLatestFrom.除此之外,它将数据嵌套在嵌套数组中,而不是将数据推送到新的数组值.示例代码如下.

任何想法如何使用.withLatestFrom检索多个可观察的发射?

.withLatestFrom(source1)
.withLatestFrom(source2)
.withLatestFrom(source3)
.map((data) => { console.log(data) });
Run Code Online (Sandbox Code Playgroud)

rxjs ngrx angular

18
推荐指数
2
解决办法
8432
查看次数

愚蠢的组件应该如何"愚蠢"?

我正在使用智能/转储组件构建我的Redux(NgRx)应用程序,但我正在努力决定愚蠢的组件应该是多么"愚蠢"......

例如,我有一个智能组件(posts),它有一个哑组件(post-list),其中包含哑组件(post).直到这里一切都很好看.

要显示一些按钮,我需要知道用户是否是admin,我需要将属性admin一直传递postspost.

我可以将哑组件连接post到商店并直接从哑组件中获取.或者在这种情况下组件是否更愚蠢?它看起来像这样:

  private admin$: Observable<boolean>;
  constructor(private store: Store<AppState>){
    this.admin$ = this.store.let(isAdmin());
  }
Run Code Online (Sandbox Code Playgroud)

我认为这样可以节省大量的冗余.这是好事还是坏事?

redux ngrx angular

17
推荐指数
2
解决办法
3328
查看次数

Angular 2:服务和redux之间的区别

redux的需求是什么,因为我们也可以保存并从服务中获取数据,据我所知,我们也可以将数据保存并保存到服务中,并且该服务可以被其他组件使用

javascript redux angular2-services ngrx angular

17
推荐指数
2
解决办法
5145
查看次数

类型'typeof StoreModule'上不存在属性'provideStore'

我估计他们发布了一些重大更改,这是我收到的错误消息:

类型'typeof StoreModule'上不存在属性'provideStore'.

我用Google搜索了这条错误消息,但没有找到任何内容.不过我想有一些我不知道的API更新.

任何人都能指出我正确的方向吗?

ngrx angular

17
推荐指数
1
解决办法
7419
查看次数

导航ID不等于当前路由器导航ID错误

我在我的Angularv5应用程序中使用@ngrx/router-store我最近开始遇到一个错误:( Navigation ID X is not equal to the current navigation id Y其中X和Y是整数).

这个问题一直发生,当我浏览来路由来自特定路由B.从任何其他途径向导航路线A似乎很好地工作.

我发现的与此相关的唯一其他SO问题提供了可能由于多次快速更新导航而导致问题的可能性.为了测试这是否发生(它不应该),我订阅了我的根组件内的路由器导航事件,在订阅中设置了一个断点,并打开了一个调试会话来逐步解决问题.这样做,我可以看到

  1. 假设当前导航ID为11.当我导航到问题路径时,路由器开始导航,成功执行包括的每个导航事件NavigationEnd,然后立即@ ngrx/router-store抛出一个'ROUTER_CANCEL'操作,说明:Navigation ID 12 is not equal to the current navigation id 13.据我所知,12是正确的导航ID(同样,导航ID 11完成并立即'ROUTER_CANCEL'抛出,而路由器不会发出任何进一步的导航事件).此外,'ROUTER_CANCEL'操作有效负载包含导致问题的路由器导航事件,以及导致问题时的存储状态.导致问题的事件的ID为12,当时商店中的路由器状态的ID为11.因此,12似乎是正确的导航ID,不应该抛出错误.

  2. 在从问题路径导航到用户配置文件路由时,在@ ngrx/router-store取消导航之前不会发生其他导航.(即我没有快速更新导航路线)

  3. 除了ngrx调度'ROUTER_CANCEL'操作之外,不报告任何错误(并且不会抛出任何错误).

再次,遇到问题的路线工作正常,除非从特定路线B开始导航.据我所知,这条特定路线B没有任何不同或不同寻常的问题(问题路线也不关心人们来自何处 - 这两条路线彼此没有关联).

最后一两件事:触发错误调试会话之外似乎总是在形式造成的错误Navigation ID X is not equal to the current navigation id X+1,但是引发了调试会话中的错误可能导致Navigation ID 11 is not equal to the current navigation id 15 …

ngrx angular angular-router ngrx-router-store

17
推荐指数
2
解决办法
7063
查看次数

使用ngrx的应用程序的最佳结构是什么?

结构1

reducers
   index.ts //Combine all reducers
   user.reducer.ts
   product.reducer.ts
actions
   index.ts  //Combine all actions
   user.action.ts
   product.action.ts
effects
   index.ts //Combine all effects
   user.effect.ts
   product.effect.ts
selector
   //Combine all selectors
   user.selector.ts
   product.selector.ts
Run Code Online (Sandbox Code Playgroud)

要么

user
  user.reducer.ts
  user.action.ts
  user.effect.ts
  user.selector.ts
product
  product.reducer.ts
  product.action.ts
  product.effect.ts
  product.selector.ts
reducers.ts //Combine all reducers
actions.ts //Combine all actions
effects.ts //Combine all effects
selectors.ts //Combine all selectors
Run Code Online (Sandbox Code Playgroud)

ngrx angular

16
推荐指数
1
解决办法
3539
查看次数

从组件调度操作时不调用ngrx效果

我遇到了ngrx商店的问题,没有调度一个应该处理它的效果的动作.

以下是尝试发送的组件:

  signin() {
    this.formStatus.submitted = true;
    if (this.formStatus.form.valid) {
      this.store.dispatch(new StandardSigninAction(this.formStatus.form.value.credentials));
    }
  }
Run Code Online (Sandbox Code Playgroud)

行动:

export const ActionTypes = {
  STANDARD_SIGNIN: type('[Session] Standard Signin'),
  LOAD_PERSONAL_INFO: type('[Session] Load Personal Info'),
  LOAD_USER_ACCOUNT: type('[Session] Load User Account'),
  RELOAD_PERSONAL_INFO: type('[Session] Reload Personal Info'),
  CLEAR_USER_ACCOUNT: type('[Session] Clear User Account')
};

export class StandardSigninAction implements Action {
  type = ActionTypes.STANDARD_SIGNIN;

  constructor(public payload: Credentials) {
  }
}
...

export type Actions
  = StandardSigninAction
  | LoadPersonalInfoAction
  | ClearUserAccountAction
  | ReloadPersonalInfoAction
  | LoadUserAccountAction;
Run Code Online (Sandbox Code Playgroud)

效果:

  @Effect()
  standardSignin$: Observable<Action> = this.actions$ …
Run Code Online (Sandbox Code Playgroud)

ngrx ngrx-effects

16
推荐指数
4
解决办法
1万
查看次数

Angular ngrx - 显示正在加载gif

我有这样的副作用:

@Effect()
FetchAllOrders$ = this.actions$
    .ofType(SalesOrderActions.FETCH_ALL_ORDERS)
    .switchMap((action: Action) => {
        return this.soApiService.getUsersSalesOrders(action.payload);
    })
    .map((salesOrders: ListDto<SalesOrderList>) => this.actions.fetchAllOrdersSuccess(salesOrders));
Run Code Online (Sandbox Code Playgroud)

我想在效果开始时显示加载符号并在结尾隐藏它.

我创建了一组独立的Actions,Reducers和store状态来处理显示加载符号.

export class BusyActions {
static SHOW_SPINNER = "SHOW_SPINNER";
static HIDE_SPINNER = "HIDE_SPINNER";

showSpinner(): Action {
   return { type: BusyActions.SHOW_SPINNER };
}

hideSpinner(): Action {
   return { type: BusyActions.HIDE_SPINNER };
}

export const BusyState: IBusyState = {
   visible: false,
   busy: false
};
Run Code Online (Sandbox Code Playgroud)

我这样做是因为加载状态需要与其他模块,状态等共享.

如何从副作用中调用我的BusyActions?我需要在开始时调用SHOW_SPINNER,最后调用HIDE_SPINNER.

我做得对吗?或者有更好的方法来处理这个问题吗?

ngrx ngrx-effects angular ngrx-store

16
推荐指数
2
解决办法
1964
查看次数