我已经阅读了这个答案,减少了样板,看了几个GitHub示例,甚至尝试了redux(todo apps).
据我了解,官方redux doc动机提供了与传统MVC架构相比的优点.但它没有提供问题的答案:
为什么你应该使用Redux而不是Facebook Flux?
这只是编程风格的问题:功能与非功能?或者问题是在redux方法中遵循的能力/开发工具?也许缩放?还是测试?
如果我说redux对于来自函数式语言的人来说是一种变化,我是对的吗?
要回答这个问题,您可以比较实施redux在flux和redux上的动机点的复杂性.
以下是官方redux doc动机的动机点:
我是React的新手,我正在努力解决我认为简单的问题.这是我构建的组件的图片.
我想要完成的事情似乎微不足道,但实际上我读过的每篇文章都解释了要做的事情告诉我一些不同的事情,而且其中一个解决方案并没有奏效.它分解为:当用户点击标签时,它会构建一个托盘并循环遍历一系列颜色以构建颜色按钮.单击颜色按钮时,需要将单击的颜色传递给其父组件并运行函数以更新其颜色.我已经读过关于焊剂,事件冒泡,将"this"绑定到属性,并且这些解决方案似乎都没有起作用.对于像我这样的新手来说,React文档基本上没用.我想在这一点上避免像flux这样的复杂事件结构,因为我将一些简单的组件附加到我最初没有在React中编写的现有应用程序中.
另外,PS,这个代码在JSX中,对我来说比直接JS反应更有意义.在此先感谢您的帮助!
var colorsArray = ["#ED5851", "#9CCC64", "#337AEC", "#ff7a45", "#7E58C2", "#FFEB3B", "#78909C", "#FFFFFF", "#213a4b"];
var EditDrawer = React.createClass({
updateColor: function() {
console.log("New Color: " + i);
},
render: function(){
var passTarget = this;
return (
<div className="container-fluid animated fadeIn extra-fast-animation tag-edit-drawer">
<div className="row">
<div className="col-xs-12">
{colorsArray.map(function(object, i){
return <ColorButton buttonColor={object} key={i} />;
})}
</div>
</div>
</div>
);
}
})
var ColorButton = React.createClass({
render: function(){
var buttonStyle = {
backgroundColor: this.props.buttonColor,
};
return (
<div className="tag-edit-color-button" style={buttonStyle} > …Run Code Online (Sandbox Code Playgroud)