我正在创建一个具有通量架构的 react.js 应用程序,并且我正在尝试找出应该在何时何地从服务器请求数据。有没有这方面的例子。(不是 TODO 应用程序!)
我非常支持将异步写入操作放在操作创建者中,并将异步读取操作放在存储中。目标是将存储状态修改代码保留在完全同步的操作处理程序中;这使它们易于推理并且易于单元测试。为了防止对同一端点的多个同时请求(例如,双重读取),我将实际的请求处理移动到一个单独的模块中,该模块使用 Promise 来防止多个请求;例如:
class MyResourceDAO { get(id) { if (!this.promises[id]) { this.promises[id] = new Promise((resolve, reject) => { // ajax handling here... }); } return this.promises[id]; } }
虽然存储中的读取涉及异步函数,但有一个重要的警告,即存储不会在异步处理程序中更新自己,而是触发一个动作并且 仅 在响应到达时触发一个动作。此操作的处理程序最终会进行实际的状态修改。
例如,一个组件可能会:
getInitialState() { return { data: myStore.getSomeData(this.props.id) }; }
商店会实现一个方法,也许是这样的:
class Store { getSomeData(id) { if (!this.cache[id]) { MyResurceDAO.get(id).then(this.updateFromServer); this.cache[id] = LOADING_TOKEN; // LOADING_TOKEN is a unique value of some kind // that the component can use to know that the // value is not yet available. } return this.cache[id]; } updateFromServer(response) { fluxDispatcher.dispatch({ type: "DATA_FROM_SERVER", payload: {id: response.id, data: response} }); } // this handles the "DATA_FROM_SERVER" action handleDataFromServer(action) { this.cache[action.payload.id] = action.payload.data; this.emit("change"); // or whatever you do to re-render your app } }