如何以及何时在React组件中使用useReducer？

Question

给出以下组件层次结构：

Home (a page that consists of a list of names and a map with markers)
- PeopleList (the list of names)
  - PersonNameCard (the details for a single name)
- PeopleMap (a google map with markers for each person's location)
  - PersonPin (a map marker showing where someone is)

当我单击一个PersonPin（或PersonNameCard）时，我希望发生两件事：

1. 切换PersonNameCard的详细信息（可见/折叠）
2. 切换图钉的颜色（例如，绿色到红色）

如果我将所有东西“ lift”放入家中并通过props和useState管理状态，我将在树上和下（通过props向下并通过state向上）发送扩展的PersonNameCard列表。副作用（由于expandedPersonNameCards属性更改），PeopleMap被重新渲染，这是不希望的。

重新渲染地图时，其中心和缩放将恢复为默认值。因此，单击图钉会切换图钉颜色，PersonNameCard，并可能将地图平移并缩放回其默认值（这不理想-单击此图钉时，我不希望地图移动）。

据我了解，我也许可以使用useReducer来管理孙辈（表亲）之间的状态，但我不知道如何做到。对于我的新手来说，文档太少了。因此，我有两个问题：

1. 这是useReducer设计的用例吗？
2. 我在哪里定义减速器，怎么称呼它？

我已经担心通过使用useReducer我coupling components too tightly，因此对此的任何想法也将受到欢迎。

此外，如果useReducer不是解决此问题的正确方法，那是什么？

非常感谢。