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 난 당신의 코드와는 Action.js에 변경해야 할 유일한 일을 시도했습니다

import { Dispatcher } from "flux"; 

export default new Dispatcher; 

Answer 1

.

ajax 호출로 인해 이벤트가 FETCH_TODOS이고 이벤트가 RECEIVE_TODOS 인 성공적인 ajar 호출 전에 응답 복귀 및 디스패처를 기다려야합니다.

시간 초과는 아약스 응답을 기다리는 것은 좋지 않습니다.

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}); 
     } 
    }); 
} 

편집 해

좋아, 이제 이해가 좀 더

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 }); 
     } 
    }); 
} 

을 Action.js과에 당신의 app.js에 호출이 메소드를 추가하십시오 생성자 메서드를 사용하면 매우 초기에 데이터를 초기화 할 수 있습니다.

Answer 2

당신이 reloadTodos 액션을 호출하는 componentDidMount를 추가해야 초기로드의 데이터를로드하려면

을 처리 할 수 ​​ RECEIVE_TODOS 때 때문에 플럭스의 올바르게 데이터를 얻을 것이다 515,는

export class EventListing extends React.Component { 
    constructor() { 
    super(); 
    this.getTodos = this.getTodos.bind(this); 
    this.state = { 
     todos: TodoStore.getAll(), 
    }; 
    TodoActions.loadData(); 
    } 

참고.

componentDidMount() { 
    TodoActions.reloadTodos(); 
} 

것은 @ pachon_1992로,

마지막으로 (꽤 인스턴트해야한다) 그래서 새로운 매장 상태가 정확하게 당신의 데이터를 표시하는 재 렌더링 트리거 WillMount DidMount이 부작용을 호출하지해야합니다 당신은 아약스 응답을 기다리는 대신 시간 초과를 사용해서는 안된다고 말했습니다. 성공시 파견해야합니다.