Smart和Dumb组件之间的React-Redux数据流

Question

我对React堆栈很新，我想了解数据如何在Smart / Dumb组件中流动。 这是我的jsbin来说明问题。

我希望从输入到clickCallback获取价值并发送＆＃34; ADD_TODO_ITEM＆＃34;使用输入名称添加待办事项的操作。通常在React数据流向下游，我不太确定如何解决这个问题。我有想法将onChange回调添加到此输入并存储最新值，这将起作用我检查它但我几乎100％确定它是不正确的方法。

Answer 1

使用clickCallback并使用新项目调度“ADD_TODO_ITEM”操作正是您想要做的，并且完全是惯用语。当商店数据更新时，组件将重新呈现自己。

您正在更新源处的数据，更改将沿着渲染管道向下流动。

从输入字段中获取值取决于您。最简单的方法是简单地使用一些DOM操作函数（可能给文本字段一个id）。如果执行以下操作，则clickCallback处理程序将获得正常事件，您可以将该按钮标识为event.target。从那里你可以很容易地获得文本字段值（它位于DOM中的按钮旁边）。

      <button onClick={this.props.clickCallback.bind(this)}>Add</button>

我无法谈论减速机的工作方式。我使用了不同的通量实现alt。因此，将新项目附加到商店中的集合是非常典型的。