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

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

以下内容：

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

如果从具有fetch的服务器检索，则不设置Redux初始状态

1 个答案: