React / Redux -加载组件时如何处理多个异步调用

Question

我对React/Redux很陌生，但到目前为止我很喜欢玩它。我遇到了一些真正困扰我的事情，但我甚至不确定这是一个我应该关心的"真正"问题。总之，在这里。

假设我有一个组件，它实际上是一个用于更新从数据库检索的记录的表单。这个记录有几个指向不同表的外键。(假设我的主表是Training，它有一个Format，一个Type，一个Place……所有这些数据都来自另一个表)。

为了能够向用户显示每个外键的所有可能值，我必须请求所有不同的表来获取数据，并在下拉框中显示这些数据。

现在，我正在做这样的事情:

dispatch(new CrudActions(places).getAll());
dispatch(new CrudActions(trainingFormats).getAll());
dispatch(new CrudActions(trainingTypes).getAll());

每一行都将调度一个redux操作，因此，根据检索到的数据更新状态的一部分。然后我的组件将简单地从state:

获取值

function mapStateToProps(state) {
    return {
        places: state.places.list,
        trainingFormats: state.trainingFormats.list,
        trainingTypes: state.trainingTypes.list
    }
}

它实际上是工作的，但后果是:每次一个动作完成并更新状态，我的组件被重新渲染…让我们假设我的主训练有10个外键:对于显示更新表单的单个页面加载，我的组件将被呈现10次。它不会导致糟糕的表现吗?是否有更好的方法来检索外部数据?

Answer 1

让我换个说法。您的每个记录组件都有地点，培训格式和培训类型的下拉菜单。下拉选项通过ajax检索。当您有几个记录时，将会有很多请求和重新呈现。

解决方案:不要让每个记录组件自己检索下拉值。对于每个下拉菜单，它们都是相同的。相反，在父组件中加载它们，并将它们作为属性传递给记录组件，例如availablePlaces, availableFormats, availableTypes。

父组件甚至不需要通过ajax加载可用的下拉选项。可以用它初始化。

有关重新渲染的进一步优化，请查看https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate。

Facebook建议在https://facebook.github.io/react/docs/react-component.html#componentdidupdate中调用ajax。