如何在React FLUX中創建API調用？

Question

我是新來的助焊劑。 我正在努力解決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;

Answer 1

我已經嘗試過您的代碼，唯一需要更改的就是在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});
        }
    });
}

EDITTED

好吧，我了解更多了

請將此方法添加到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將正確獲取數據

Answer 2

如果要在初始加載時加載數據，則應添加一個componentDidMount，它調用reloadTodos操作。

componentDidMount() {
  TodoActions.reloadTodos();
}

確保在DidMount中調用此副作用，而不是在WillMount中調用此副作用，這樣新的存儲狀態將正確觸發顯示數據的重新渲染（應該是非常及時的）

最后，正如@ pachon_1992所說，您不應該使用超時來等待ajax響應，而應該在成功時分派