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

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

提问by Eugene

I've started learning React / Redux and stumbled on something that is probably a very basic question. Below are snippets from my app with some code removed for simplicity sake.

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

My state is described by an array of sites which is empty by default. Later reducer will have LOAD_SITESaction to load a different set of sites whenever user paginates to a different page but for now it's doing nothing. React starts by rendering PublishedSitesPagewhich then renders PublishedSitesBoxwhich then loops over data and renders individual sites.

我的状态由一组默认为空的站点描述。以后LOAD_SITES，每当用户分页到不同的页面时，reducer 都会执行加载一组不同的站点的操作，但现在它什么都不做。React 首先渲染PublishedSitesPage，然后渲染PublishedSitesBox，然后循环遍历数据并渲染各个站点。

What I want to do is have it render everything with the default empty array and meanwhile initiate a "load sites from server" promise and once it resolves, dispatch LOAD_SITESaction. What is the best way to make this call? I was thinking about either constructor of PublishedSitesBoxor perhaps componentDidMount. But not sure if this would work - my concern is that I'll create an endless loop this way that will keep re-rendering. I guess I could prevent this endless loop in some way by having some other state param along the lines of "haveRequestedInitialData". Another idea I had is to simply make this promise right after doing ReactDOM.render(). What is the best and cleanest way to do this?

我想要做的是让它使用默认的空数组呈现所有内容，同时启动“从服务器加载站点”的承诺，一旦解决，就调度LOAD_SITES操作。拨打此电话的最佳方式是什么？我在想的任何构造PublishedSitesBox或者可能componentDidMount。但不确定这是否可行 - 我担心的是我会以这种方式创建一个无限循环，以继续重新渲染。我想我可以通过在“haveRequestedInitialData”的行中使用其他一些状态参数来以某种方式防止这种无限循环。我的另一个想法是在做完之后立即做出这个承诺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
});

采纳答案by S McCrohan

There's no reason for this data load logic to touch your React components at all. What you want here is for the return of the promise to dispatch an action to your reducers, which make the appropriate changes to the store, which then causes the React components to re-render as appropriate.

这种数据加载逻辑根本没有理由触及您的 React 组件。您在这里想要的是返回将 action 分派给您的 reducer 的承诺，这对 store 进行适当的更改，然后导致 React 组件根据需要重新渲染。

(It doesn't matter whether you kick off the async call before or after you call ReactDOM.render; the promise will work either way)

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

Something like this:

像这样的东西：

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

Your React components are consumers of your store, but there's no rule that they need to be the ONLY consumers of your store.

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

回答by Aakash Arayambeth

There is a clear example here on how to do it : Facebook Tutorial

这里有一个明确的例子说明如何做到这一点：Facebook 教程

As for the endless loop, Once your array is no longer empty , Clear the Interval. This should prevent the loop.

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