2016-12-30 51 views
1

我是应用程序的reactjs/redux世界的新手。我正在创建一个带有页面布局的Web应用程序,其中左侧有一个名称列表,右侧显示了所选名称的详细信息。如何在reactjs/redux应用程序的列表中维护选定的项目?

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

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

如何在选择项目之前维护选定的项目(以及其他所有在该列表上完成的项目)?我几乎认为我必须保持我的redux状态下的电网状态...但是,是吗?这是我唯一的选择吗?

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

回答

0

我建议你发送,节省了selectedId INT了Redux状态的动作。我也建议你保存回到原来的对象与ID为重点和细节的价值

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

这将使每一个细节,所以你不必等待一个AJAX调用返回在显示细节之前。此时,您只需显示与您在selectedId中保存的ID相匹配的详细数据。

查看this了解更多关于redux动作的信息。

0

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

https://facebook.github.io/react/docs/react-component.html

相关问题