如何存储来自不同来源的编辑状态答案

【问题标题】：How to store editing state from different sources如何存储来自不同来源的编辑状态
【发布时间】：2016-06-17 21:37:26
【问题描述】：

有很多待办事项列表的在线示例。那些特别是您可以编辑待办事项的地方。在商店中存储您正在编辑的内容似乎很明显。

但是现在想象一下，如果您在同一页面上有两个待办事项列表。假设这两个待办事项列表是相同的，也就是同一个实体。

如果你在一个待办事项列表上进行编辑，同时显示他们正在编辑。

在商店中表示来源的最佳方式是什么？以及如何将其发送给动作创建者？

【问题讨论】：

我不清楚你想要达到什么目的。 “同一实体”是什么意思？总是一模一样？那么列表 1 中的所有编辑都会实时反映在列表 2 中吗？两个列表都指向商店中的同一个列表？
@wintvelt 是的，两个列表都显示完全相同的待办事项。变化反映在两者中。但是，在一个列表中编辑待办事项时，另一个列表在完成之前不会显示它正在编辑

标签： reactjs reactjs-flux

【解决方案1】：

从您的评论中，您希望两个 Todo 组件引用相同的数据，即，如果您将待办事项添加到一个列表中，您想要的列表是否反映在另一个列表中。这意味着它们共享相同的数据，这实际上简化了事情。

为了简洁而简化的类

class Store extends EventEmitter {
  constructor() {
    super()
    this.data = [ 'a', 'b', 'c' ]
  }

  mutate( index, value ) {
    this.data[ index ] = value
    this.onChange()
  }

  onChange() {
    this.emit( 'change', this.data )
  }
}

var store = new Store()

class MyComponent extends React.Component {
  constructor( props ) {
    super( props )
    this.state = store.data
  }

  componentWillMount() {
    store.on( 'change', data => this.setState( data ) )
  }
}

setTimeout( () => {
  store.mutate( 1, 100 )
}, 1000 )

在这个简单的示例中，关键是MyComponent 的实例正在侦听对底层数据存储的更改（您可以通过注册回调或使用 Flux 样式的调度程序或许多其他方法来实现相同的目的）。当数据发生变化时，它会发出事件并将数据传递给任何订阅者。在这种情况下，订阅者获取数据并设置他们的状态，这会触发重新渲染以使您的 UI 保持同步。

如果您真的想重用 Todo 组件，以便在您的应用程序中拥有多个 Todo 列表，那么您只需要有一种方法来区分组件所需的数据。实现这一点的一个非常简单的方法是触发一个从您的商店请求数据源的函数（而不是像示例中那样硬编码），然后任何更改数据的请求都需要识别正确的数据源，但 UI将通过侦听和响应突变事件保持一致。

【讨论】：

制作可重用组件或存储数据没有任何问题。我正在考虑的部分是同时在屏幕上显示两个待办事项列表。但是，当一个人正在编辑一个项目时，另一个不是。
那你的问题不够清楚，你的cmets只会让它更混乱。您要么希望两个组件引用相同的数据，要么希望两个组件具有不同的数据源，我的回答解决了这两种情况并回答了其中一个。如果您有不同的要求，可能值得关闭这个问题并开始一个新问题。如果您实例化您的组件的两个实例，它们的状态将有所不同，除非您专门同步它们（即通过侦听单个数据源）。
这个答案+1。我同意@MattStyles，如果答案不能满足您的需求，您需要澄清一下。