reactjs - 你如何维护 reactjs/redux 应用程序列表中的选定项目？

Question

我是 reactjs/redux 应用程序世界的新手。我正在创建一个具有页面布局的 Web 应用程序，其中左侧有一个名称列表，右侧显示所选名称的详细信息。

使用 redux，当从列表中选择一个名称时，应用程序会分派一个 ajax 调用来获取详细信息。这最终会使用选定的详细信息更新 redux 状态，并导致详细信息组件使用信息进行更新。

名称列表是使用 ag-grid 创建的，因此它能够突出显示所选项目。但是一旦 redux 状态更新，所有组件似乎都会重新呈现，并且列表中的选定项目不再被选中。我猜一般来说，名称列表的状态会在页面加载时回到初始状态（即，如果列表被过滤，则不再被过滤）。

在选择一个项目之前，我如何维护所选项目（以及该列表上所做的所有其他事情）？我几乎在想我也必须在我的 redux 状态下保持网格状态......但这是对的吗？这是我唯一的选择吗？

我的组件的结构是一个容器组件（WSContainer），它有两个子组件，NameTable 和 NameDetails。

score 1 · Accepted Answer

为什么不将所选项目的值、索引或文本保留在状态内？然后，当页面呈现时，您可以使用 componentDidMount 或 componentWillMount 方法突出显示选定的名称（或您想要做的任何其他事情）。

score 1 · Accepted Answer

我建议您调度一个将 selectedId 保存为 redux 状态的操作。我还建议将您返回的每个详细信息存储在一个对象中，其中 id 作为键，详细信息作为值

detailsById: {
  id1: detail1,
  id2: detail2
},
selectedId: id1

这将使您不必在显示详细信息之前等待 ajax 调用返回。此时，您只需显示与您保存为 selectedId 的 id 匹配的详细数据。

查看这里以获取有关 redux 操作的更多信息。

2 回答 2