如何使用 Reflux 在 Store 中使用 AJAX 获取初始状态
How to get initial state with AJAX in a Store with Reflux
最近我一直在研究 React 和 Reflux。
我被卡住的部分是我无法在 Reflux 的商店中使用 AJAX 获得初始状态。
我尝试的只是在 Store.js 中调用 getInitialState
函数中的 ajax($.getJSON)
,用 AJAX 响应(JSON)设置初始状态,然后弄清楚什么国家是。
我预计 AJAX 调用的输出将是 JSON 数组列表,但实际输出将是 undefined
那么我怎样才能在有 Reflux 的 Store 中使用 AJAX 获取 InitialState?
代码是这样的...
// in store.js
getInitialState: function() {
$.getJSON('/sample').done(function(result){
this.list = result;
});
return this.list;
}
// in sampleApp.jsx
mixins: [Reflux.connect(Store, "list")],
render() {
console.log(this.state.list);
// I expected this output would be JSON lists, but the actual output will be undefined.
return ();
}
这段代码有很多问题:
getInitialState: function() {
$.getJSON('/sample').done(function(result){
this.list = result;
});
return this.list;
}
首先,您在 Ajax 请求返回数据之前返回 this.list
。这实际上意味着您正在从该函数返回 undefined
。第二个问题是您在 Ajax 回调中使用 this
,它不会指向 Reflux 存储。为此,你需要使用箭头函数和 ES6 转译器。
但是您无论如何都不应该在 getInitialState
中执行 Ajax 请求。您正在寻找的是这样的东西:
var MyStore = Reflux.createStore({
getInitialState: function () {
return {
list: []
}
},
init: function () {
var self = this;
$.getJSON('/sample').done(function (result) {
self.trigger({list: result});
});
}
});
最近我一直在研究 React 和 Reflux。
我被卡住的部分是我无法在 Reflux 的商店中使用 AJAX 获得初始状态。
我尝试的只是在 Store.js 中调用 getInitialState
函数中的 ajax($.getJSON)
,用 AJAX 响应(JSON)设置初始状态,然后弄清楚什么国家是。
我预计 AJAX 调用的输出将是 JSON 数组列表,但实际输出将是 undefined
那么我怎样才能在有 Reflux 的 Store 中使用 AJAX 获取 InitialState?
代码是这样的...
// in store.js
getInitialState: function() {
$.getJSON('/sample').done(function(result){
this.list = result;
});
return this.list;
}
// in sampleApp.jsx
mixins: [Reflux.connect(Store, "list")],
render() {
console.log(this.state.list);
// I expected this output would be JSON lists, but the actual output will be undefined.
return ();
}
这段代码有很多问题:
getInitialState: function() {
$.getJSON('/sample').done(function(result){
this.list = result;
});
return this.list;
}
首先,您在 Ajax 请求返回数据之前返回 this.list
。这实际上意味着您正在从该函数返回 undefined
。第二个问题是您在 Ajax 回调中使用 this
,它不会指向 Reflux 存储。为此,你需要使用箭头函数和 ES6 转译器。
但是您无论如何都不应该在 getInitialState
中执行 Ajax 请求。您正在寻找的是这样的东西:
var MyStore = Reflux.createStore({
getInitialState: function () {
return {
list: []
}
},
init: function () {
var self = this;
$.getJSON('/sample').done(function (result) {
self.trigger({list: result});
});
}
});