其他 - Redux和组件架构

为了帮助组件更通用和可重用，值得尝试将它们分成容器组件和演示组件。

redux docs.

记住这一点，让我们重构我们的 是一个演示组件。 首先，让我们修改我们的app-container，在它上面有两个计数器组件，就像我们现在有的一样。

View Example

看看这个例子，你可以看到已经有一个 app/reducers/curse-reducer.ts 和 app/actions-curse-actions.ts。 它们几乎与计数器动作和计数器reducer相同，我们只是想创建一个新的reducer来保持它的状态。

要将计数器组件从智能组件转换为哑组件，我们需要更改它以将数据和回调传递到其中。 为此，我们将使用将数据传递到组件中，并将操作回调作为@Output属性。

我们现在有一个很好的可重用的演示组件，它不知道Redux或我们的应用程序状态。

app/components/counter-component.ts

app/src/containers/app-containter.ts

此时，模板正在尝试调用我们的两个ActionCreatorServices，CounterActions和上的操作; 我们只需要使用依赖注入来住它们：

app/src/containers/app-container.ts

View Ngrx Example