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

推荐答案

这种数据加载逻辑根本没有理由触及您的 React 组件.您在这里想要的是返回将操作分派给您的减速器的承诺，减速器对存储进行适当的更改，然后导致 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 之前还是之后启动异步调用都没有关系；无论哪种方式，promise 都会起作用)

(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屋！