패치가있는 서버에서 가져온 경우 Redux 초기 상태가 설정되지 않음

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