如何在reactjs/redux应用程序中维护列表中的选定项?

如何在reactjs/redux应用程序中维护列表中的选定项?,reactjs,redux,ag-grid-react,Reactjs,Redux,Ag Grid React,我不熟悉reactjs/redux应用程序的世界。我正在创建一个具有页面布局的web应用程序,其中左侧有一个名称列表,右侧显示所选名称的详细信息 使用redux,当从列表中选择一个名称时,应用程序将发送一个ajax调用以获取详细信息。这最终会使用选定的详细信息更新redux状态,并使详细信息组件使用该信息更新 名称列表是使用ag grid创建的,因此它能够突出显示选定的项目。但是,一旦redux状态更新,所有组件似乎都会重新加载,并且列表中的选定项不再被选中。我猜一般来说,当页面加载时,名称列表

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

使用redux,当从列表中选择一个名称时,应用程序将发送一个ajax调用以获取详细信息。这最终会使用选定的详细信息更新redux状态,并使详细信息组件使用该信息更新

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

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


“我的组件”的结构是一个容器组件(WSContainer),它有两个子项,即NameTable和NameDetails。

为什么不将所选项目的值、索引或文本保留在状态中?然后,在页面呈现时,您可以使用componentDidMount或componentWillMount方法突出显示所选名称(或您想要执行的任何其他操作)


我建议您发送一个操作,将selectedId保存到redux状态。我还建议将返回的每个细节存储在一个对象中,id作为键,details作为值

detailsById: {
  id1: detail1,
  id2: detail2
},
selectedId: id1
这将使您不必等到ajax调用返回后再显示细节。此时,您只需显示与您在选择EDID时保存的id相匹配的详细信息数据

查看有关redux操作的更多信息