如何创建阵营FLUX API调用？答案

【问题标题】：How to create API calls in React FLUX?如何创建阵营FLUX API调用？
【发布时间】：2017-01-13 23:56:50
【问题描述】：

我是通量新手。我在过去 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;

【问题讨论】：

只是一个建议...尝试使用 redux 而不是 Flux ...
您是否尝试过使用 axios，就像他们在您遵循的教程中所做的那样？我遵循了相同的方法，但仍在内部尝试没有 API 的状态。

标签： javascript html reactjs reactjs-flux

【解决方案1】：

我已经尝试了您的代码，您唯一需要更改的是 Action.js。

由于 ajax 调用，您必须等到响应返回并在使用事件 FETCH_TODOS 的 Ajar 调用和使用事件 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 时，您将正确获取数据

【讨论】：

我的问题是如何在不点击按钮的情况下获取ajax数据。现在我正在点击按钮时获取数据。 @pachon-1992
你成功了吗？你能选择一个正确的答案吗？
是的。谢谢@pachon_1992。
我还有一个问题。如果我将图像数据作为 url 加载（例如，google.com/sample.jpg），则每次在我重新访问已访问的页面时都会重新加载。如何解决这个问题？
这是另一个问题，你能不能提出一个新问题并解释一下我不明白

【解决方案2】：

如果您想在初始加载时加载数据，您应该添加一个调用 reloadTodos 操作的 componentDidMount。

componentDidMount() {
  TodoActions.reloadTodos();
}

确保在 DidMount 而不是 WillMount 中调用此副作用，这样新的存储状态将正确触发重新渲染以显示您的数据（应该非常即时）

最后，正如@pachon_1992 所说，您不应该使用超时来等待您的 ajax 响应，而是应该在成功时调度

【讨论】：