reactjs - React + Flux 架构下维护 List 中的焦点 Item

Question

我有一个项目列表，还有一个 div 用于显示项目的详细信息。例如，

--------------------------------------------
| Items List  |  Selected Item Detail      |
--------------------------------------------
| Item A      |   Item C is selected       |
| Item B      |   Item C is a cool         |
| Item C*     |                            |
| Item D      |                            |
--------------------------------------------

我的组件是:

- AppContainer
  - Item List
    - Item
  - Selected Item Detail

AppContainer 具有以下统计信息

• 所有项目
• selectedItemId

我的问题是:实现正确吗？

1. 我是否应该在AppContainer中维护selectedItemId(一个整数)，并在将所选项目传递给所选项目详细信息时通过id找到相应的项目？
2. 或者我应该将 selectedItem (一个对象)保留为状态，并将其直接传递给所选项目详细信息？
3. 我应该将 selectedItem 或 selectedItemId 保留在 Flux 的 Store 中吗？ (假设我在应用程序中使用 Flux 后将 allItems 保留在 Store 中。)

谢谢。

Answer 1

正如您的问题所暗示的，有多种方法可以实现同一目标，所以我认为这不是实现是否正确的问题，而是哪种实现最有意义。

Should I maintain selectedItemId (an integer) in AppContainer, and find the corresponding item by the id when passing selected item to Selected Item Detail? Or should I keep a selectedItem (an object) as state, and pass it to Selected Item Detail directly?

我认为一般来说，最好保持状态尽可能紧凑，并派生依赖于实际需要的其他数据的数据。还有旧的 DRY 标准“不要重复自己”。由于所选项目可以从所有项目和索引的集合中派生，因此我将存储索引而不是项目的额外副本。

Should I keep the selectedItem or selectedItemId in Flux's Store? (given I keep the allItems in Store after using Flux in my application.)

出于与上述相同的原因，我会存储 ID 而不是项目的副本。