我在哪里从React Redux应用程序中的服务器获取初始数据？ [英] Where do I fetch initial data from server in a React Redux app?

问题描述

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

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.

我的状态由一系列默认为空的网站描述。后来的reducer将有 LOAD_SITES 操作，只要用户分页到不同的页面，就可以加载不同的网站集，但现在它什么都不做。 React首先渲染 PublishedSitesPage ，然后渲染 PublishedSitesBox 然后循环数据并渲染单个网站。

My state is described by an array of sites which is empty by default. Later reducer will have LOAD_SITES action 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 PublishedSitesPage which then renders PublishedSitesBox which then loops over data and renders individual sites.

我想做的是让它使用默认的空数组渲染所有内容，同时启动从服务器加载网站的承诺，一旦结算，就发送 LOAD_SITES 操作。拨打这个电话的最佳方式是什么？我在考虑 PublishedSitesBox 的构造函数，或者 componentDidMount 。但不确定这是否可行 - 我担心的是，我会以这种方式创建一个无限循环，以保持重新渲染。我想我可以通过在haveRequestedInitialData的行中设置一些其他状态参数来以某种方式阻止这种无限循环。我的另一个想法是在做 ReactDOM.render（）之后立即做出这个承诺。什么是最好和最干净的方法？

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_SITES action. What is the best way to make this call? I was thinking about either constructor of PublishedSitesBox or 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?

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

推荐答案

这个数据加载逻辑没有理由触及你的完全反应组件。你想要的是返回承诺向你的Reducer发送一个动作，它对商店进行适当的改变，然后使React组件适当地重新渲染。

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.

（在调用ReactDOM.render之前或之后是否启动异步调用并不重要;承诺将以任何方式工作）

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

这样的事情：

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组件是您商店的消费者，但没有规定他们需要成为唯一的消费者你的商店

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 Redux应用程序中的服务器获取初始数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！