javascript - 如果使用 fetch 从服务器检索，则未设置 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
    }
  });
}

我想做的是设置从服务器端获取数据的初始状态。但存储继续使用 reducer 中定义的空值进行初始化。如果我尝试使用函数但使用内部数据(例如返回预定义的对象)来设置它，则可以工作。这样的操作有什么限制吗？

谢谢，米歇尔

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

或者，如果您不介意应用程序在没有数据的情况下初始化，然后在请求完成时重新呈现，您可以添加一个接受完整数据的操作，然后处理该数据在 reducer 中。

大致如下:

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