Question

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

但是如果您在同一页面上有两个待办事项列表，则现在显示图像。假设这两个todo列表都是相同的，也就是说，它们是同一个实体。

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

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

Answer 1

从您的评论中，您希望两个Todo组件都引用相同的数据，即如果您将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通过倾听和回应突变事件来保持一致。

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

1 个答案: