如何在使用 Reflux 的商店中使用 AJAX 获取初始状态

Posted 2023-02-22

【中文标题】如何在使用 Reflux 的商店中使用 AJAX 获取初始状态

【英文标题】：How to get initial state with AJAX in a Store with Reflux

【发布时间】：2015-07-24 14:38:44

【问题描述】：

最近我一直在研究 React 和 Reflux。 我被卡住的部分是我无法在 Reflux 的商店中使用 AJAX 获得初始状态。 我尝试的只是在 Store.js 中的 getInitialState 函数中调用 ajax($.getJSON)，使用 AJAX 响应（JSON）设置初始状态，并弄清楚状态是什么。 我预计 AJAX 调用的输出是 JSON 数组列表，但实际输出是 undefined

那么？

代码是这样的...

// 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 ();
   

【参考方案1】：

这段代码有很多问题：

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

【讨论】：

或者如果你不使用 es6 转译器，只需调用 bind。