Javascript React中类似Reddit的投票系统

Javascript React中类似Reddit的投票系统,javascript,reactjs,web,redux,voting-system,Javascript,Reactjs,Web,Redux,Voting System,我试图在React内部创建类似reddit的投票系统。我正在创建一个更大的应用程序,其中包括Redux,我正在尝试将当前分数作为道具传递给投票组件,并将结果保存到商店。我碰到了一堵墙,我想不出正确的方法 我是否应该在reducer中处理算法,并且只从投票组件中分派操作或者组件是否应该保持其自身的局部状态,并且只分派当前分数作为参数的操作 这是我过去创建的旧实现。这是一个简单的问题 就其目的而言运作良好的投票系统。然而 从未真正存储保存结果,只是将其显示在DOM中: var React=要求('R

我试图在React内部创建类似reddit的投票系统。我正在创建一个更大的应用程序,其中包括Redux,我正在尝试将当前分数作为道具传递给投票组件,并将结果保存到商店。我碰到了一堵墙,我想不出正确的方法

我是否应该在reducer中处理算法,并且只从投票组件中分派操作或者组件是否应该保持其自身的局部状态,并且只分派当前分数作为参数的操作

这是我过去创建的旧实现。这是一个简单的问题 就其目的而言运作良好的投票系统。然而 从未真正存储保存结果,只是将其显示在DOM中: var React=要求('React')

var Voting=React.createClass({
getDefaultProps:function(){
返回{
号码:利兹巴,
向上投票:“向上投票”,
否决票:“否决票”
};
},
getInitialState:函数(){
返回{
投票结果:错,
被否决:错误
};
},
向上投票:函数(){
这是我的国家({
向上投票:!this.state.upvoted,
被否决:错误
});
},
下一票:函数(){
这是我的国家({
投票结果:错,
否决:!this.state.downpowed
});
},
渲染:函数(){
var{number,upvote,downvote}=this.props;
var{upvoted,downvoted}=this.state;
函数表决(){
如果(向上投票){
数字++;
upvote=‘upvote active’;
}否则,如果(被否决){
数字--;
下一票=‘下一票有效’;
}
};
投票();
返回(
{number}
);
}
});
module.exports=投票;
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;