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

Question

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

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

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

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

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

Answer 1

我建议您分派(dispatch)一个将 selectedId 保存到 redux 状态的操作。我还建议将您返回的每个详细信息存储在一个对象中，以 id 作为键，将详细信息作为值

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

这将使您不必等待 ajax 调用返回就可以显示详细信息。那时，您只需显示与您保存为 selectedId 的 ID 相匹配的详细数据。

检查 this了解更多关于 redux 操作的信息。