フェッチでサーバから取得した場合、リダイヤルの初期状態は設定されていません

Question

私はReduxとReactを初めて使用していますので、いくつかの基本コードを記述しようとしています。私は愚かに見えますが解決できない問題があります。

これは私が何をしようとしているスニペット

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { createStore } from 'redux' 
import { Provider } from 'react-redux' 
import fetch from 'isomorphic-fetch' 
import App from './components/App'; 
import registerServiceWorker from './registerServiceWorker'; 
import reducer from './reducers' 

const store = createStore(reducer,getInitialState()) 

ReactDOM.render(
    <Provider store={store}> 
    <App /> 
    </Provider>, 
    document.getElementById('react') 
); 
registerServiceWorker(); 


function getInitialState(){ 
    const headers = new Headers() 
    var url = 'http://fluxy.mulvm.ie.ibm.com:80' 
    headers.append('Content-Type', 'application/hal+json') 
    fetch(`${url}/api/listEnvironmentResources`, { method: 'GET', headers: headers }).then(
     function(response){ 
     return response.json(); 
     } 
).then(jsonData => { 
    return { 
     environmentRecords : jsonData._embedded.environmentRecordResources 
    } 
    }); 
} 

では、サーバ側から初期状態になったデータを設定することです。しかし、ストアは引き続き減速機で定義された空の値で初期化されました。 関数を使用して、代わりに（あらかじめ定義されたオブジェクトを返すような）内部データを使って設定しようとすると、それは機能します。このような操作に制限はありますか？

おかげで、 ミケーレ

Answer 1

あなたがそうであっても、サーバーが返すデータの前に、アプリケーションが実行を継続します、動作しません非同期関数の戻り値を使用しようとしています。

解決策はストアを初期化し、fetchの成功コールバックでReactDOM.renderを呼び出すことでした。データがあることを確認してください。

例えば

：

then(jsonData => { 
    const initialState = { 
    environmentRecords : jsonData._embedded.environmentRecordResources 
    } 
    const store = createStore(reducer, initialState) 

    ReactDOM.render(
    <Provider store={store}> 
     <App /> 
    </Provider>, 
    document.getElementById('react') 
);  
}); 

または、アプリを気にしない場合、要求は、あなたが受け入れるアクションを追加することができます完了時に再レンダリングされ、その後データなしで初期化、およびされています完全なデータは、減速機で処理されます。私は似たような恐れ

const rehydrateAction = data => { 
    return { 
    type: 'REHYDRATE', 
    payload: data, 
    }; 
}; 

const appReducer = (state, action) => { 
    if (action.type === 'REHYDRATE') { 
    return action.payload; 
    } 
    // ... 
    return state; 
} 
then(jsonData => { 
    const initialState = { 
    environmentRecords : jsonData._embedded.environmentRecordResources 
    } 
    store.dispatch(rehydrateAction(initialState)); 
})