智能组件和哑组件之间的 React-Redux 数据流答案

【问题标题】：React-Redux data-flow between Smart and Dumb Components智能组件和哑组件之间的 React-Redux 数据流
【发布时间】：2016-06-17 18:52:30
【问题描述】：

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

我想从输入中获取值到 clickCallback 并调度“ADD_TODO_ITEM”操作以添加具有输入名称的待办事项。通常在 React 数据流向下游，我不太确定如何解决这个问题。我有想法将 onChange 回调添加到此输入并存储最新值，这将起作用我检查了它，但我几乎 100% 确定它不是正确的方法。

【问题讨论】：

标签： javascript reactjs redux react-redux

【解决方案1】：

拥有一个 clickCallback 并使用新项目调度“ADD_TODO_ITEM”操作正是您想要做的，并且对于通量来说完全是惯用的。当存储数据更新时，组件将重新渲染自身。

您正在更新源中的数据，并且更改顺着渲染管道向下流动。

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

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

我无法谈论减速器的工作方式。我使用不同的通量实现alt。在这种情况下，将新项目附加到商店中的集合是非常典型的。

【讨论】：

是的，但是如何将输入字段的值获取到 clickCallback？
你怎么看“让 next_state = _.cloneDeep(state);” ?我看到很多人使用不同的函数来确保他们的 reducer 是纯的，但是创建克隆对象并修改它不是更简单吗？
你很少想要对你的状态做一个 deep 克隆。如果你有嵌套数据，你需要为每一层嵌套做 shallow 克隆，但你希望尽可能多的状态内容相同。见redux.js.org/docs/FAQ.html#performance-clone-state。
谢谢。它解释了很多。