I'm trying to create reddit-like voting system inside of React. . I'm creating a bigger application which involves Redux and I'm trying to pass current score as props to the Voting component and save the outcome to the store. I've run into a wall and I cannot figure out the proper way to do so.
Should I handle the algorithm inside reducer and only dispatch actions from Voting component or should the component keep its own local state and only dispatch actions with the current score as argument?
Here's my old implementation I created in the past. It's a simple voting system which for its purposes worked just fine. However it was never really storing saving the outcome, just displayed it inside DOM: var React = require('react');
var Voting = React.createClass({
getDefaultProps: function() {
return {
number: liczba,
upvote: 'upvote',
downvote: 'downvote'
};
},
getInitialState: function () {
return{
upvoted: false,
downvoted: false
};
},
upvote: function () {
this.setState({
upvoted: !this.state.upvoted,
downvoted: false
});
},
downvote: function () {
this.setState({
upvoted: false,
downvoted: !this.state.downvoted
});
},
render: function () {
var {number, upvote, downvote} = this.props;
var {upvoted, downvoted} = this.state;
function voting(){
if(upvoted){
number++;
upvote = 'upvote-active';
} else if(downvoted){
number--;
downvote = 'downvote-active';
}
};
voting();
return(
<div className="vote">
<div className={upvote} onClick={this.upvote}></div>
<div className="score">{number}</div>
<div className={downvote} onClick={this.downvote}></div>
</div>
);
}
});
module.exports = Voting;
Aucun commentaire:
Enregistrer un commentaire