Question

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

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

我想要做的是让它使用默认的空数组渲染所有内容，同时启动“从服务器加载网站”承诺，一旦结算，就发送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
});

Answer 1

这个数据加载逻辑根本没有理由触及你的React组件。你想要的是返回承诺向你的Reducer发送一个动作，它对商店进行适当的改变，然后使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组件是您商店的消费者，但没有规定他们需要成为您商店的唯一消费者。

Answer 2

这里有一个明确的例子：Facebook Tutorial

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

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

2 个答案: