Flux, как правильно использовать компоненты?

Question

все еще изучает Flux, у меня проблемы с некоторой логикой о магазине. Предположим, я создал компонент, одну кнопку, управляющую голосованием, например, переключатель «Да»/«Нет».

Итак, у меня есть свой голос, который управляет голосованием, которое использует диспетчер для вызова функции Store, которая изменяет состояние votedByViewer.

Все это весело, и все это правильно ... если у меня есть одна кнопка. Но если у меня есть мультипликаторы, они имеют один и тот же магазин, поэтому повторное рендеринг происходит во всех кратных компонентах.

Это мои первые ЯШ:

// Parse all DIV for React management 
$("#be-content [id*=like]").each(function (index) { 
    var div_id = $(this).attr("id"); 

    // Render the VoteButton 
    ReactDOM.render(
     <VoteButton />, 
     document.getElementById(div_id) 
    ) 
}); 

Каждый VoteButton правильно отображаются в странице, но каждый переключатель изменяет состояние всех кнопок. Это мой VoteButton:

var voteStore = require('../stores/voteStore') ; 
var voteActions = require('../actions/voteActions'); 

var VoteButton = React.createClass({ 
    getInitialState: function() { 
     return { 
      voted: voteStore.getVote() 
     } 
    }, 
    componentDidMount: function() { 
     voteStore.addVoteListener(this._onChange); 
    }, 
    componentWillUnmount: function() { 
     voteStore.removeVoteListener(this._onChange); 
    }, 
    handleVote: function() { 
     this.state.voted ? voteActions.unvote() : voteActions.vote() 
    }, 
    _onChange: function() { 
     this.setState({ 
      voted: voteStore.getVote() 
     }) 
    }, 
    render: function() { 
     return (
      <div className="link"> 
       <button onClick={this.handleVote}>{this.state.voted? 'YES':'NO'}</button> 
      </div> 
     ) 
    } 
}); 

module.exports = VoteButton; 

Любая идея о том, как его решить? Может быть, мне нужно использовать Контейнеры? Спасибо

Answer 1

Все что вам нужно, это установить один идентификатор для каждой кнопки, которую вы используете. Когда вы нажимаете кнопку, она передает этот идентификатор действию, затем диспетчер, а затем получает его. Ваш магазин представляет собой массив, и каждый ключ является идентификатором кнопки. Когда хранилище получает данные, он изменяет необходимый идентификатор. И ваша кнопка получает состояние своего id (getVote ('buttonid');)