我正在尝试使用react.js的waitFor函数,但似乎我做错了.
我想做什么我基本的,等待商店填写之前从另一家商店打电话.1.在第一个商店中注册令牌
RipplelinesStore.dispatcherIndex= Dispatcher.register(function(payload) {
var action = payload.action;
var result;
switch(action.actionType) {
case Constants.ActionTypes.ASK_RIPPLELINES:
registerAccount(action.result);
RipplelinesStore.emitChange(action.result);
break;
}
});
2.在另一个商店中写下等待
Dispatcher.register(function(payload) {
var action = payload.action;
var result;
switch(action.actionType) {
case Constants.ActionTypes.ASK_RIPPLEACCOUNTOVERVIEW:
console.log("overviewstore",payload);
Dispatcher.waitFor([
RipplelinesStore.dispatcherIndex,
]);
RippleaccountoverviewsStore.test= RipplelinesStore.getAll();
console.log(RippleaccountoverviewsStore.test);
break;
}
return true;
});
不幸的是我的getall()方法返回一个空对象(getAll()编写得很好).所以似乎waitFor调度程序功能不起作用.
基本上我知道这是因为第一个商店仍然从服务器接收答案,但我认为waitFor会等待它被取出我不明白.
任何线索？谢谢!
编辑:我解雇了第一个商店获取像tha.我不明白的是,一旦我的骨干集合被提取,我就会调度负载(我发送成功后承诺......)
ripplelinescollection.createLinesList(toresolve.toJSON()).then(function() {
Dispatcher.handleViewAction({
actionType: Constants.ActionTypes.ASK_RIPPLELINES,
result: ripplelinescollection
});
});
我也尝试将waitfor绑定到一个从未调用但另一个商店仍未等待的动作!奇怪的 !
我正在使用Flux架构的反应.
我在网上看到,为了定义Store,我必须做类似的事情:
var AppDispatcher = require('../dispatcher/dispatcher'), //facebook's dispatcher
EventEmitter = require('events').EventEmitter,
assign = require('object-assign');
var MyStore = assign({}, EventEmitter.prototype, {
.....
据我了解,EventEmitter和facebook的调度员有很多共同之处.例如,两者都可以发出(或发送)一个事件.
我的问题是为什么我需要EventEmitter和调度程序？这不是多余的吗？创建一个包含EventEmitter所需行为的调度程序不是更好吗？
我在我正在研究的项目中使用reactjs和flux体系结构.我对如何将嵌套数据正确地分解到商店以及为什么我应该将数据分成多个商店感到困惑.
为了解释这个问题,我将使用这个例子:
想象一下你有项目的Todo应用程序.每个项目都有任务,每个任务都有笔记.
该应用程序使用REST API检索数据,返回以下响应:
{
projects: [
{
id: 1,
name: "Action Required",
tasks: [
{
id: 1,
name: "Go grocery shopping",
notes: [
{
id: 1,
name: "Check shop 1"
},
{
id: 2,
name: "Also check shop 2"
}
]
}
]
},
]
}
虚拟应用程序的界面在左侧显示项目列表,当您选择项目时,该项目将变为活动状态,其任务将显示在右侧.单击任务时,您可以在弹出窗口中查看其注释.
我要做的是使用1个单独的商店,即"Project Store".操作会向服务器发出请求,获取数据并指示商店使用新数据填充自己.商店在内部保存这个实体树(项目 - >任务 - >注释).
为了能够根据选择的项目显示和隐藏任务,我还在商店中保留一个变量"activeProjectId".基于此视图可以获取活动项目,其任务并呈现它们.
问题解决了.
但是:在网上搜索一下以确定这是一个很好的解决方案后,我看到很多人都说你应该为每个实体使用一个单独的商店.
这意味着:ProjectStore,TaskStore和NoteStore.为了能够管理关联,我可能还需要一个"TasksByProjectStore"和一个"NotesByTaskStore".
有人可以解释为什么这会更好吗？我唯一看到的是管理商店和数据流的大量开销.
我想在创建我的React组件时使用一些抽象.例如:
class AbstractButton extends React.Component {
render() {
return (
<button
onClick={this.props.onClick}
className={this.definitions.className}>
{this.props.text}
</button>
}
}
class PrimaryButton extends AbstractButton {
constructor(options) {
super(options);
this.definitions = {
className: 'btn btn-primary'
};
}
}
class SuccessButton extends AbstractButton {
constructor(options) {
super(options);
this.definitions = {
className: 'btn btn-success'
};
}
}
我不想通过这些definitions,props因为我知道这些definitions- 在这种情况下 - 将class永远不会改变.
它是React中的反模式吗？还是可以吗？
我的问题涉及这个altjs问题:这种抽象与之不兼容@connectToStores.
我一直在使用React/Flux,我无法绕过'Flux Way'处理权限敏感操作.
首要问题:当未登录的访问者尝试需要他/她登录的操作时,(a)检查用户是否已登录,(b)启动登录流程(c)的Flux方式是什么？ )完成成功的行动？
以一个论坛应用为例,要求用户登录发布:
我们有一个评论表单组件(主要来自FB的React tut),如下所示:
var CommentForm = React.createClass({
handleSubmit: function ( e ) {
e.preventDefault();
// get data
commentData = {
content: this.refs.content.getDOMNode().value.trim()
};
this.props.onCommentSubmit( commentData );
this.resetForm();
},
resetForm: function () {
this.refs.content.getDOMNode().value = '';
},
render: function () {
return (
<form className="comment-form" id="comment-form" onSubmit={ this.handleSubmit }>
<textarea name="comment[content]" placeholder="What's on your mind?" ref="content"></textarea>
<button className="post-comment button" type="submit">Post</button>
</form>
)
}
});
评论商店(缩写)
var CHANGE_EVENT = 'change';
var _comments = {};
function createComment ( data …我正在使用Facebook flux架构构建应用程序React JS.我已经构建了app的基本部分,我有一个登录表单.我从节点服务器获取结果以验证商店中的用户,我从服务器获得结果,现在我卡住了,如何在成功后将用户重定向到主页.
我已经阅读了有关反应路由器组件的信息,我能够在客户端重定向,但在从Store中的ajax获取结果时无法重定向.请帮我.
我正在使用nodejs并且通常传递csrf令牌,如下所示:
util.js中
module.exports.csrf = function csrf(req, res, next){
res.locals.token = req.csrfToken();
next();
??};
app.js
app.use(csrf());
app.use(util.csrf);
然后在ejs页面我会这样做
<input type="hidden" name="_csrf" value="<%= token %>">
但是,现在我正在使用flux/react作为我的前端,需要传递一个csrf令牌来提交表单而不确定如何执行此操作.这里有一个类似的答案使用玉:
如何使用express.js在Ajax调用中实现CSRF保护(寻找完整示例)？
但是,我正在使用ejs(使用jsx)(或只是html)并且不想使用jade
在全球事件总线上使用Flux有什么优势？我认为调度员就是所需要的:
我在这里错过了什么,我不能没有Flux？
如何从文本输入更新redux的状态？
我正在尝试用文本输入做一个非常简单的"Hello World".当有人输入文本输入时,它应该更新我的商店的"searchTerm"值.
我无法弄清楚这些事情:1.我怎样才能将输入的值传递给它的"onChange"处理程序？2."搜索"操作似乎被正确调用,但我的reducer函数从未使用过(没有console.log).
SearchForm.js(组件)
import React, {Component, PropTypes} from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {search} from 'redux/modules/search-term';
@connect(
null,
dispatch => bindActionCreators({ search }, dispatch)
)
export default class SearchForm extends Component {
static propTypes = {
search: PropTypes.func.isRequired,
}
render() {
return (
<input type="text" placeholder="Search" onChange={search} />
);
}
}
search-term.js(动作和减速器)
const SEARCH = 'redux-example/repo-filter/SEARCH';
const initialState = {
searchTerm: null
};
export default function reducer(state = initialState, action = …reactjs-flux ×10
reactjs ×9
flux ×6
javascript ×5
event-bus ×1
eventemitter ×1
node.js ×1
redux ×1
refluxjs ×1