-1

There are a lot of online examples of todo lists. Those especially where you can edit a todo. It seems obvious to store which one you're editing in the store.

But now image if you had two todo lists on the same page. Let's say both of these todo lists are the same, aka, are the same entity.

If you go to edit on one todo list both with show that they are editing.

What's the best way to denote source in the store? And how would you send that to the action creator?

jshthornton
  • 1,284
  • 11
  • 29
  • It is not clear to me what you are trying to achieve. What does it mean that "the same entity"? Always exactly the same? so all edits in list 1 reflected in list 2 in real time? Both lists point to the same 1 list in store? – wintvelt Mar 04 '16 at 08:32
  • @wintvelt Yes both lists are showing the exact same todos. Changes are reflecting in both. However when editing a todo in one list the other list does not show it being edited until it is finished – jshthornton Mar 04 '16 at 08:33

1 Answers1

0

From your comment you want both Todo components to reference the same data i.e. if you add a Todo to one list you want if reflected in the other. This means they share the same data, which actually simplifies things.

Classes simplified for brevity

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 )

In this trivial example the key is that instances of MyComponent are listening for changes to the underlying data store (you could achieve the same by registering callbacks, or employing a Flux-style dispatcher, or many other methods). When the data changes, it emits and event and passes the data to any subscribers. In this case the subscribers take the data and set their state which triggers a re-render to keep your UI in sync.

If you actually want to reuse your Todo component so that you can have several Todo lists in your app then you’ll just have to have a way to differentiate between the data that components require. A very simple way of achieving this would be to trigger a function that requests a data source from your store (rather than hard-coding as in the example), any requests to change data would then need to identify the correct data source but the UI would remain consistent through listening and responding to mutation events.

Matt Styles
  • 2,442
  • 1
  • 18
  • 23
  • I don't have any problem making a reusable component, or storing the data. The part I am contemplating is having two todo lists on the screen at the same time. But whilst one is editing an item the other is not. – jshthornton Mar 04 '16 at 10:05
  • Then your question isnt clear enough, and your comments only make it more confusing. You either want two components to reference the same data or you want two components with disparate data sources, my answer addresses both scenarios and answers one of them. If you have a different requirement it's probably worth closing this question and starting a new one. If you instantiate two instances of your component their state will differ unless you specifically sync them (i.e. by listening to single data source). – Matt Styles Mar 04 '16 at 12:46
  • +1 for this answer. I agree with @MattStyles that you need to clarify if the answer does not address your need. – wintvelt Mar 04 '16 at 14:29