Question: if I want to put two same to-do-list on my page, how to avoid two states effect each other?

Question

if I want to put two same to-do-list on my page, how to avoid two states effect each other?

Answers 1
Added at 2016-10-18 12:10
Tags
Question

I am new to react and reflux.
I want to put two same to-do-list show different data on one page, but when I add one item in one to-do-list, the other one also get the item.
I know they share the same store now.
How to resolve this? Adding store to each to-do-list is not elegant, because stores are related to action. It will have two same stores and actions, also two same components. Or add different name props for Todo components, send the name to the action as parameter, then to store, to distinguish the store?
Any good ideas?

//store.js

import Reflux from 'reflux'
import actions from '../actions/actions'

Array.prototype.remove=function(dx){
  if(isNaN(dx)||dx>this.length){return false;}
  for(var i=0,n=0;i<this.length;i++){
    if(this[i]!=this[dx])
    {
      this[n++]=this[i]
    }
  }
  this.length-=1
};

export default Reflux.createStore({
  items:[],
  listenables: [actions],
  onGetAll () {
    this.trigger({list:this.items})
  },
  onAdd(item){
    this.items.push({name:item});
    this.trigger({list:this.items});
  },
  onRemove(i){
    this.items.remove(i);
    this.trigger({list:this.items});
  }
});

//todo.js

import React from 'react'
import Reflux from 'reflux'
import ReactMixin from 'react-mixin'
import store from '../stores/store'
import actions from '../actions/actions'

export default class Todo extends React.Component{
  componentDidMount() {
    actions.getAll();
  }
  add(){
    var item =this.refs.item.value;
    this.refs.item.value='';
    actions.add(item);
  }
  remove(i){
    actions.remove(i);
  }
  render() {
    let items;
    if(this.state.list){
      items=this.state.list.map( (item,i)=> {
        return <li key={i}>
          {item.name}
          <button onClick={this.remove.bind(this,i)}>remove</button>
          </li>
      })
    }
    return (
      <div>
        <input type="text" ref="item"/>
        <button onClick={this.add.bind(this)}>add</button>
        <ul>
          {items}
        </ul>
      </div>
    )
  }
}
ReactMixin.onClass(Todo, Reflux.connect(store));
Answers to

if I want to put two same to-do-list on my page, how to avoid two states effect each other?

nr: #1 dodano: 2016-10-18 12:10

If you're going to have two stores or two lists in one store doesn't really matter. What matters is that, indeed, if you want to have separate to-dos, you must have separate data stores for them, right?

Unless interacting with one to-do list can interfere with the other, I'd say you would be safe to have two different stores. The advantage would be that you would re-render a smaller part of your app when one store changes, as opposed to re-rendering both lists.

Anyway, next time try to bring some code examples so we can help you more effectively. As it is, this question is far too open ended!

Source Show
◀ Wstecz