我有点想到如何实现一个reducer,其实体可以有相同类型的子.
让我们以reddit注释为例:每个注释都可以有子注释,可以自己注释等等.为了简化原因,注释是类型的记录{id, pageId, value, children},pageId是reddit页面.
如何为减速机建模？我正在考虑让reducer成为一个map - > id的注释,你可以使用它来逐页过滤pageId.
问题是,例如当我们想要为嵌套的注释添加注释时:我们需要在地图的根上创建记录,然后在父子属性中添加其id.要显示我们需要获取所有这些注释的所有注释,请过滤掉我们在顶部的那些注释(例如,将它们作为orderedList保存在页面reducer中)然后迭代它们,从注释对象获取时我们遇到使用递归的孩子.
有没有比这更好的方法或有缺陷？
在上周,我一直试图理解双向数据绑定(Angular)和单向数据流(React/Flux)是如何不同的.他们说单向数据流更强大,更容易理解和遵循:它是确定性的,有助于避免副作用.然而,在我的新手眼中,它们看起来几乎相同:视图监听模型,模型对视图所做的操作做出反应.两者都声称模型是真实的唯一来源.
任何人都能以可理解的方式全面解释它们之间的真正差异以及单向数据流如何更有益且更容易推理？
我的代码 https://gist.github.com/ButuzGOL/707d1605f63eef55e4af
因此,当我获得登录成功回调时,我想进行重定向,
重定向也通过调度程序工作.
而且我得到的是Dispatch.dispatch(...):无法在发送过程中发送.
在中间是否有任何黑客行动？
在我的Flux架构的React应用程序中,我正在从商店中检索数据,并且想要创建一个操作来请求该信息(如果它不存在).但是我遇到了调度员已经调度的错误.
我想要的代码是这样的:
getAll: function(options) {
options = options || {};
var key = JSON.stringify(options);
var ratings = _data.ratings[key];
if (!ratings) {
RatingActions.fetchAll(options);
}
return ratings || [];
}
但是,当调度程序已经使用该消息调度操作时,间歇性地失败Invariant Violation: Dispatch.dispatch(...): Cannot dispatch in the middle of a dispatch..我经常提出请求以响应应用程序状态的变化(例如日期范围).我发出请求的组件,响应来自的更改事件AppStore具有以下内容:
getStateFromStores: function() {
var dateOptions = {
startDate: AppStore.getStartISOString(),
endDate: AppStore.getEndISOString()
};
return {
ratings: RatingStore.getAll(dateOptions),
};
},
我知道事件链接是一个Flux反模式,但我不确定哪种架构在尚不存在时检索数据更好.目前我正在使用这个可怕的黑客:
getAll: function(options) {
options = options || {};
var key = JSON.stringify(options);
var ratings = _data.ratings[key];
if (!ratings) …我发现todo flux app的示例有点缺乏,所以我试图通过开发一个学习和实验的应用程序来解决问题.
该应用程序是一个拖放水果篮组织者.我有几个篮子,可以在它们之间拖着各种水果.您可以通过单击突出显示一块水果,最后拖动的项目将保持突出显示.
基于此,我有3家商店:
当用户操作发生时,如果点击了水果,则由AppStateStore调度和处理FruitAction;如果水果已被移动到另一个篮子,则由所有商店处理.
主AppView组件侦听来自FruitStore和AppStateStore的更改事件并重新呈现.
我的问题是:
我正在玩一些反应来建立一个"添加到购物车按钮".这是我的代码.
var ProductPurchase = React.createClass({
handleSubmit: function(e){
e.preventDefault();
$.ajax({
url: "/cart/add.js",
method: "post",
dataType: "json",
data: {
"id": this.props.variantId,
"quantity": this.props.quantity,
},
success: function(data) {
// emit cart added event
}.bind(this),
error: function(xhr, status, err) {
// emit error event (cart added)
}.bind(this)
});
},
getDefaultProps: function(){
return {
quantity: 1,
variantId: 231634908,
buttonText: "Add to cart"
}
},
render: function() {
return (
<div className="productPurchase">
<form action="/cart/add" method="post" enctype="multipart/form-data" onSubmit={this.handleSubmit}>
<input type="hidden" name="quantity" value={ this.props.quantity } />
<input type="hidden" …我正在开发一个应用程序,我希望计时器从60秒倒计时到0,然后更改一些内容,之后计时器再次在60处重新启动.
我已经在React和Flux中实现了这个,但由于我是新手,我仍然遇到了一些问题.
我现在想为计时器添加一个开始/停止按钮.我不知道在哪里放置/处理定时器状态.
我有一个Timer.jsx看起来像这样的组件:
var React = require('react');
var AppStore = require('../stores/app-store.js');
var AppActions = require('../actions/app-actions.js');
function getTimeLeft() {
return {
timeLeft: AppStore.getTimeLeft()
}
}
var Timer = React.createClass({
_tick: function() {
this.setState({ timeLeft: this.state.timeLeft - 1 });
if (this.state.timeLeft < 0) {
AppActions.changePattern();
clearInterval(this.interval);
}
},
_onChange: function() {
this.setState(getTimeLeft());
this.interval = setInterval(this._tick, 1000);
},
getInitialState: function() {
return getTimeLeft();
},
componentWillMount: function() {
AppStore.addChangeListener(this._onChange);
},
componentWillUnmount: function() {
clearInterval(this.interval);
},
componentDidMount: function() {
this.interval = setInterval(this._tick, …我发现的几乎所有关于flux的教程每个商店只发出一个事件(emitChange).我真的不知道,这是故意的,或仅仅是教程简单的结果.
我尝试实现一个与CRUD架构相对应的商店,我想知道为每个CRUD方法发出不同事件是否是一个好的设计决策.
我的一家商店的相关部分看起来像这样:
var UserStore = _.extend({}, EventEmitter.prototype, {
emitChange: function() {
this.emit('change');
},
emitUserAdded: function() {
this.emit('userAdded');
},
emitUserUpdated: function() {
this.emit('userUpdated');
},
emitUserDeleted: function() {
this.emit('userDeleted');
},
// addListener, removeListener in the same manner
});
如果我的方法是错误的,我如何告诉我的组件发生的事件类型(例如:删除或更新)
从这里的讨论来看,似乎应该将Redux Reducer的状态保存在数据库中.
在这种情况下,用户身份验证之类的功能如何？
对于创建和编辑的每个用户(及其应用程序状态),是否不会创建新的状态对象来替换数据库中的先前状态？
是否会在前端使用所有这些数据并不断更新数据库中的状态？
编辑:我已经创建了一个示例Redux auth项目,它也恰好是通用Redux的示例,并使用Redux,Socket.io和RethinkDB进行实时更新.
我是新手做出反应和变化,我很难弄清楚如何从服务器加载数据.我能够从本地文件加载相同的数据,没有任何问题.
所以首先我有这个控制器视图(controller-view.js),它将初始状态传递给视图(view.js)
控制器view.js
var viewBill = React.createClass({
getInitialState: function(){
return {
bill: BillStore.getAllBill()
};
},
render: function(){
return (
<div>
<SubscriptionDetails subscription={this.state.bill.statement} />
</div>
);
}
});
module.exports = viewBill;
view.js
var subscriptionsList = React.createClass({
propTypes: {
subscription: React.PropTypes.array.isRequired
},
render: function(){
return (
<div >
<h1>Statement</h1>
From: {this.props.subscription.period.from} - To {this.props.subscription.period.to} <br />
Due: {this.props.subscription.due}<br />
Issued:{this.props.subscription.generated}
</div>
);
}
});
module.exports = subscriptionsList;
我有一个动作文件,可以为我的应用程序加载INITAL数据.因此,这是不是作为用户操作调用的数据,而是在控制器视图中从getInitialState调用的数据
InitialActions.js
var InitialiseActions = {
initApp: function(){
Dispatcher.dispatch({ …