如何將初始數據從軌道加載到redux

我試圖從軌道加載json，並將其傳遞給redux createStore。如何將初始數據從軌道加載到redux

let initialStore = window.INITIAL; 

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

但我總是得到未定義，或只是在存儲後window.INITIAL返回值。

首先，商店加載空對象，然後取動作被調度，我得到更新與json商店，但我已經有錯誤，當我試圖調用像{product.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

你是如何處理這個問題的？我想這樣做沒有像反應軌道等任何寶石，我不能在一個地方通過所有初始狀態到根組件。

來源

2016-01-09 Eugene Domosedov

真的很簡單，你只需要在'window.initial'的某處添加一個標誌，比如'window.INITIAL.isFetching = true'，然後當你得到你的返回數據時就把它改成false。通過這種方式，您可以查詢數據是否已加載並呈現加載映像或其他內容... – RichieAHB

爲什麼要將數據從Redux外部傳遞到Redux？你爲什麼不觸發獲取初始有效載荷的動作？但無論如何，如果你的數據是通過線路獲取的，你應該也有一個「空閒狀態」。瀏覽器是非阻塞的並且是異步的，因此您必須*在數據從服務器返回前必須考慮請求數據的代碼;即如果沒有加載代碼，則不能假設數據在那裏。 –

在你上面的問題有以下幾點：

let initialStore = window.INITIAL; 

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

與上面的代碼的問題是，由於它的存在，當第一次加載頁面只會填充您的存儲與window.INITIAL。對window.INITIAL的任何進一步更改都將被忽略。

你需要做的是填充window.INITIAL你的初始數據在你的服務器上呈現的代碼。也就是說，只需將腳本塊之前你的終極版代碼：

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

就是這樣。現在擺脫AJAX電話。你不需要它。這將會有更多的性能。而不是強制用戶在之後的上等待另一個請求，該頁面已經呈現，用戶改爲在頁面的其餘部分同時獲取所有數據。

來源

2016-01-11 02:35:27

如何將初始數據從軌道加載到redux

回答

相關問題