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

Where do I fetch initial data from server in a React Redux app?

本文关键字：获取 服务器 数据 在哪里 React Redux 应用程序      更新时间：2023-09-26

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

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

我想做的是让它使用默认的空数组渲染所有内容，同时启动"从服务器加载站点"承诺，一旦解决，就调度LOAD_SITES操作。拨打此电话的最佳方式是什么？我在考虑PublishedSitesBox的构造函数或componentDidMount.但不确定这是否有效 - 我担心我会以这种方式创建一个无限循环，不断重新渲染。我想我可以通过按照"haveRequestInitialData"的行使用其他一些状态参数来以某种方式防止这种无限循环。我的另一个想法是在做完ReactDOM.render()后立即做出这个承诺。最好和最干净的方法是什么？

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

这个数据加载逻辑根本没有理由触及你的 React 组件。这里你想要的是返回承诺，将一个动作调度到你的化简器，这些化简器对存储进行适当的更改，然后导致 React 组件根据需要重新渲染。

（无论你是在调用 ReactDOM.render 之前还是之后启动异步调用并不重要;无论哪种方式，承诺都将起作用）

像这样：

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 组件是您商店的消费者，但没有规定它们必须是您商店的唯一消费者。

这里有

一个关于如何做到这一点的明显例子： 脸书教程

至于无限循环，一旦你的数组不再为空，清除间隔。这应该可以防止循环。

相关文章：