Question

我尝试从rails加载json，并将其传递给redux createStore。

let initialStore = window.INITIAL;

const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
const store = createStoreWithMiddleware(rootReducer, initialStore);

但我总是得到未定义的，或者只是window.INITIAL在存储后返回值。

首先，使用空对象存储加载，然后调度fetch操作，并使用json更新存储，但是当我试图在{empty.title}上调用类似的东西时，我已经出错了宾语。无论我做什么，我都无法在redux开始之前加载json，即使是像这样的全局数据。

(function() {
  $.getJSON('http://localhost:3000/products.json', function(data) {
    return window.INITIAL = data;
  });
});

Api和控制器很简单。

def index
  products = Product.all
  render json: products
end

你怎么处理这个？我想在没有像react-rails等任何宝石的情况下这样做，我不能在一个地方将所有初始状态传递给Root组件。

Answer 1

在上面的问题中，您有以下内容：

let initialStore = window.INITIAL;

const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
const store = createStoreWithMiddleware(rootReducer, initialStore);

上述代码的问题在于，它只会在页面首次加载时使用window.INITIAL填充您的商店。对window.INITIAL的任何进一步更改都将被忽略。

您需要做的是使用服务器呈现的代码中的初始数据填充window.INITIAL。也就是说，只需将脚本块放在你的redux代码之前：

<script>
    var INITIAL = { /* this object should match the shape of your reducer state */ }; 
</script>

那就是它。现在摆脱AJAX调用。你不需要它。这也将更高效。用户不必强迫用户在页面已经呈现之后等待之后的其他请求，而是在与页面其余部分同时获取所有数据。

如何将rails中的初始数据加载到redux

1 个答案: