- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我是 Flux 的新手。我正在努力解决这个问题 10 个小时。我创建了一个示例待办事项应用程序。最初我想从服务器加载一些数据。但我不知道如何获取这些数据。当我点击按钮时,我能够获取数据。请有人帮我解决这个问题。因为我很早就想完成这个。
我的示例代码,
App.js
var React = require('react');
import * as TodoActions from "./js/Actions";
import TodoStore from "./js/stores/EventLists";
export class EventListing extends React.Component {
constructor() {
super();
this.getTodos = this.getTodos.bind(this);
this.state = {
todos: TodoStore.getAll(),
};
}
componentWillMount() {
TodoStore.on("change", this.getTodos);
}
componentWillUnmount() {
TodoStore.removeListener("change", this.getTodos);
}
getTodos() {
this.setState({
todos: TodoStore.getAll(),
});
}
reloadTodos() {
TodoActions.reloadTodos();
}
render() {
var List = this.state.todos.map(function(el, i){
return <li key={i}>
<div>{el.STA_NAME}</div>
</li>;
});
return (
<div className="listing">
<button onClick={this.reloadTodos.bind(this)}>Reload!</button>
<ul>
{List}
</ul>
</div>
);
}
}
var Events = React.createClass({
render:function(){
return (<div>
<EventListing />
</div>);
}
});
module.exports = Events;
Store.js
import EventEmitter from 'events';
import dispatcher from "../dispatcher"
class EventLists extends EventEmitter {
constructor(){
super();
this.todos = [{}];
}
createTodo(text) {
const id = Date.now();
this.todos.push({
id,
text,
complete: false,
});
this.emit("change");
}
getAll() {
return this.todos;
}
handleActions(action) {
switch(action.type) {
case "CREATE_TODO": {
this.createTodo(action.text);
break;
}
case "RECEIVE_TODOS": {
this.todos = action.todos;
this.emit("change");
break;
}
}
}
};
const eventLists = new EventLists;
dispatcher.register(eventLists.handleActions.bind(eventLists));
export default eventLists;
Action.js
import dispatcher from "./dispatcher";
export function createTodo(text) {
dispatcher.dispatch({
type: "CREATE_TODO",
text,
});
}
export function deleteTodo(id) {
dispatcher.dispatch({
type: "DELETE_TODO",
id,
});
}
export function reloadTodos() {
var loadData;
$.ajax({
url:url,
type:'GET',
contentType: 'application/json; charset=UTF-8',
dataType:'json',
success:function(data) {
loadData = data;
}.bind(this)
});
dispatcher.dispatch({type: "FETCH_TODOS"});
setTimeout(() => {
console.log(loadData);
dispatcher.dispatch({type: "RECEIVE_TODOS", todos: loadData});
}, 1000);
}
Dispatcher.js
import { Dispatcher } from "flux";
export default new Dispatcher;
最佳答案
我已经尝试了您的代码,您唯一需要更改的是 Action.js。
由于 ajax 调用,您必须等到响应返回并在使用事件 FETCH_TODOS
进行半开调用和使用事件 RECEIVE_TODOS
成功调用之前使用调度程序。
超时不是等待 ajax 响应的好主意。
export function reloadTodos() {
dispatcher.dispatch({type: "FETCH_TODOS"});
var loadData;
$.ajax({
url:url,
type:'GET',
contentType: 'application/json; charset=UTF-8',
dataType:'json',
success:function(data) {
loadData = data;
dispatcher.dispatch({type: "RECEIVE_TODOS", todos: loadData});
}
});
}
已编辑
好吧,现在我明白了一点
请将此方法添加到 Action.js
export function loadData() {
dispatcher.dispatch({ type: "FETCH_TODOS" });
$.ajax({
url: "https://jsonplaceholder.typicode.com/todos/",
type: 'GET',
contentType: 'application/json; charset=UTF-8',
dataType: 'json',
success: function(response) {
dispatcher.dispatch({ type: "RECEIVE_TODOS", todos: response });
}
});
}
并在你的 app.js 的构造方法上调用它,这样你就可以在一开始就初始化数据
export class EventListing extends React.Component {
constructor() {
super();
this.getTodos = this.getTodos.bind(this);
this.state = {
todos: TodoStore.getAll(),
};
TodoActions.loadData();
}
请注意,由于通量,您将在处理 RECEIVE_TODOS
时正确获取数据
关于javascript - 如何在 React FLUX 中创建 API 调用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39350471/
我正在尝试构建一个应用程序 A(如适配器),它将: 1)接收带有某些 key (JSON格式)的POST请求 2) 它应该以某种方式修改该 key 并向另一个系统 B 创建 POST 请求。 3)应用
除了语义之外,是否有任何理由为 View 和服务器操作创建不同的调度方法?我见过的所有教程和示例(最值得注意的是 this )在监听已分派(dispatch)的有效负载时完全忽略源常量,以支持打开有效
我的密码 https://gist.github.com/ButuzGOL/707d1605f63eef55e4af 因此,当我收到登录成功回调时,我想进行重定向, 重定向也可以通过调度程序进行。 我
我试图找出使用 Flux 架构处理中型复杂应用程序中相当常见的情况的最佳方法是什么,当组成数据的模型之间存在依赖关系时如何从服务器检索数据。例如: 商店网络应用程序,具有以下模型: 购物车(用户可以拥
我有点坚持一项琐碎的任务:每当我使用响应式 spring WebClient 查询外部 API 或查询响应式 MongoDBRepository 时,我想记录有多少实体通过了我的通量,例如。记录消息,
我有这种情况。我有一个分页 API,它为我提供了过去 12 个月的数据。 API 的响应如下: public class PagedTransfersDto { private List cont
我有两个 Flux,一个用于成功元素,另一个用于保存错误元素 Flux success= Flux.just("Orange", "Apple", "Banana","Grape", "Strawbe
我现在正在使用 Flux .我想创建一个 Flux来自两个不同的对象 Flux .我知道我必须使用 BiFunction但我不知道怎么办。第一个对象对第一个对象有 PK,第二个 FK。我想压缩 PK=
我们正在重构一个大型 Backbone 应用程序以使用 Flux 来帮助解决一些紧密耦合和事件/数据流问题。但是,我们还没有弄清楚如何处理需要知道特定 ajax 请求状态的情况 当 Controlle
作为主题,Flux.concatMapIterable 和 Flux.flatMapIterable 都不会根据大理石图交错,这与 Flux.concatMap 和 Flux.flatMap 其中 f
我有一个flux这是由 Iterable 构建的8 个元素 ( Flux.fromIterable(..) )。对于每个通量排放,我想异步调用一个方法。我尝试了各种方法 dispatchOn和publ
Mono mono1 = repository.get(id); // data from reactive mongo Flux availabilityInfo = getAvailability
使用同构应用程序设置应用程序初始状态的一般做法是什么?如果没有 Flux,我会简单地使用类似的东西: var props = { }; // initial state var html = Reac
你好,我的代码是这样的: fun mapBatch(batch: List): Mono> ... fun myFun(stream: Flux): Flux { return stream
所以我从文档中了解到,并行 Flux 本质上是将通量元素划分为单独的轨道。(本质上类似于分组)。就线程而言,这将是调度程序的工作。因此,让我们考虑这样的情况。所有这些都将在通过 runOn() 方法提
我一直看到使用 flatMap 的例子对于 1 对 1 操作,例如: Flux.just("a", "b", "c") .flatMap(s -> Mono.just(s.toUpperCas
Flux.create 和有什么区别和 Flux.generate ?我正在寻找 - 最好是使用示例用例 - 了解我何时应该使用其中一个。 最佳答案 简而言之: Flux::create doesn'
我想发布 key 列表,但仅限于修改 key 时。 通过以下内容,即使没有任何更改,它也会以无限循环的方式发布值 RedisReactiveCommands commands = connec
我正在尝试从我从服务器获得的许多项目中实现无限滚动,但我找不到任何适当的方法来保持通量架构设计规则。 想法是:在第一次加载时,我从服务器获取完整的项目列表(只有 id),然后使用 ajax 每次获取
我有端点:/upstreams 它将返回以下格式的 Json: { "next" : "String", "data" : [ { "id" : "String",
我是一名优秀的程序员,十分优秀!