在React + Flux架构下维护列表中的焦点项目

时间:2015-02-05 12:26:35

标签: reactjs reactjs-flux

我有一个项目列表,我有一个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具有以下统计信息

  • allItems
  • selectedItemId

我的问题出现了:实施是否正确?

  1. 我应该在AppContainer中维护selectedItemId(整数),并在将所选项目传递给所选项目明细时按ID找到相应的项目吗?
  2. 或者我应该将selectedItem(对象)作为州,并将其直接传递给所选项目明细
  3. 我应该将selectedItemselectedItemId保留在Flux商店吗? (在我的应用程序中使用Flux后,我将allItems保留在Store中。)
  4. 感谢。

1 个答案:

答案 0 :(得分:3)

正如您的问题所示,有多种方法可以实现相同的目标,因此我认为的实现不是 最有意义的

  

我应该在AppContainer中维护selectedItemId(一个整数),和   将所选项目传递给时,按ID查找相应的项目   精选商品详情?或者我应该将selectedItem(一个对象)保留为   状态,并直接将其传递给选定的项目明细?

我认为一般情况下,最好保持状态尽可能紧凑,派生数据,这些数据取决于实际需要的其他数据。还有旧的DRY标准,不要重复自己。'由于所选项目可以从所有项目和索引的集合中导出,因此我会存储索引而不是项目的额外副本。

  

我应该在Flux的商店中保留selectedItem还是selectedItemId?   (鉴于我在使用Flux后将allItems保存在Store中   的应用程序。)

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