Question

根据ngrx/store示例（https://github.com/ngrx/platform/blob/master/docs/store/README.md），我希望在我的商店中使用密钥count1和count2拥有2个独立的计数器状态。它们在以下代码中定义：

// counter.ts
import { Action } from '@ngrx/store';

export const INCREMENT = 'INCREMENT';

export function counterReducer(state: number = 0, action: Action) {
  switch (action.type) {
    case INCREMENT:
      return state + 1;

    default:
      return state;
  }
}

// app-module.ts
import { NgModule } from '@angular/core'
import { StoreModule } from '@ngrx/store';
import { counterReducer } from './counter';

@NgModule({
  imports: [
    BrowserModule,
    StoreModule.forRoot({ count1: counterReducer, count2: counterReducer })
  ]
})
export class AppModule {}

我需要更改哪些内容才能将2个不同的增量操作（例如store.dispatch({ type: INCREMENT })）发送到更新count1或count2但不同时更新两者的商店？我在这里遗漏了什么或这种行为不可能吗？

Answer 1

您需要为计数器1和计数器2设置两个单独的操作

实施例

export const INCREMENT_COUNTER_1 = 'INCREMENT_COUNTER_1';
export const INCREMENT_COUNTER_2 = 'INCREMENT_COUNTER_2';

同样适用于减量。每个计数器需要有两个单独的递减操作。

如果你想组合动作，例如，你想要增加counter1，5秒后你想增加counter2，你可以在你的效应器中做到这一点。在你的效应器中，你将有两个效果，一个用于递增counter1，一个用于等待5秒然后调用counter2的observable，另一个用于递增counter2的效应器。

这是一个使用RxJs 6和angular 6的GitHub真实世界项目。希望有所帮助。

Answer 2

你需要将当前状态传递给函数，就像通常使用Redux一样。因此，您需要根据业务逻辑传递state.count1或state.count2。

如何在您的应用程序中实现这一点取决于您的代码的其余部分，但counterReducer当然似乎能够采用两个版本的状态。这完全取决于你管理实际状态的地方。

在理想的情况下，你会在某个时候有一个state对象，你可以从你的应用程序视图中查询，这里你可以存储2个variable count名为{{}的版本1}}和count1或其他什么。您甚至可以只使用包含2 count2的{{1}} count，但我认为这仅用于测试。

如果您为示例添加更多代码或设置object链接，我们可以为您提供更多帮助。

如何在我的商店中使用相同的减速器逻辑的多个状态？

2 个答案: