javascript - 在 React Redux 应用程序中，我在哪里从服务器获取初始数据？

Question

我已经开始学习 React/Redux 并且偶然发现了一些可能是非常基本的问题。以下是我的应用程序的片段，为简单起见删除了一些代码。

我的状态由一组默认为空的站点描述。稍后，reducer 将具有 LOAD_SITES 操作，以便在用户分页到不同页面时加载一组不同的站点，但现在它什么都不做。 React 首先呈现 PublishedSitesPage，然后呈现 PublishedSitesBox，然后循环数据并呈现各个站点。

我想要做的是让它使用默认的空数组呈现所有内容，同时启动“从服务器加载站点” promise ，一旦它解决，调度 LOAD_SITES 操作。调用此电话的最佳方式是什么？我正在考虑 PublishedSitesBox 或 componentDidMount 的构造函数。但不确定这是否可行——我担心的是我将以这种方式创建一个无限循环，以不断重新渲染。我想我可以通过沿着“haveRequestedInitialData”的行设置一些其他状态参数来以某种方式防止这种无限循环。我的另一个想法是在执行 ReactDOM.render() 之后立即做出这个 promise 。执行此操作的最佳和最干净的方法是什么？

export default function sites(state = [], action) {
  switch (action.type) {
    default:
      return state;
  }
}
...

const publishedSitesPageReducer = combineReducers({
  sites
});

ReactDOM.render(
  <Provider store={createStore(publishedSitesPageReducer)}>
    <PublishedSitesPage />
  </Provider>,
  this.$view.find('.js-published-sites-result-target')[0]
);

...

export default function PublishedSitesPage() {
  return (
    <PublishedSitesBox/>
  );
}

...

function mapStateToProps(state) {
  return { sites: state.sites };
}

const PublishedSitesBox = connect(mapStateToProps)(({sites}) => {
  // render sites
});

Answer 1

此数据加载逻辑根本没有理由触及您的 React 组件。您在这里想要的是返回向您的 reducer 分派(dispatch)操作的 promise ，这会对商店进行适当的更改，然后导致 React 组件根据需要重新呈现。

(在调用 ReactDOM.render 之前或之后启动异步调用并不重要；无论哪种方式，promise 都会起作用)

像这样:

var store = createStore(publishedSitesPageReducer);

someAsyncCall().then(function(response) {
  store.dispatch(someActionCreator(response));
});

ReactDOM.render(
  <Provider store={store}>
    <PublishedSitesPage />
  </Provider>,
  this.$view.find('.js-published-sites-result-target')[0]
);

您的 React 组件是商店的消费者，但没有规定它们必须是商店的唯一消费者。