使用React UseSelector选择整个商店与选择单个值

Question

场景：你好，我有这样一个场景，我有一个redux商店，有很多字段，比如30。这些字段中的大多数用于ReusableChildFormComponent，一些用于ParentComponent，少数用于Grandparent组件。

<GrandparentComponent>
<Provider/Context>
<ParentComponent>
<ResuableChildFormComponent props={...} />
</ ParentComponent >
</ Proivder/Context>
</ GrandparentComponent>

我的方法：为了避免不得不通过props传递这么多字段，我认为使用一个包含存储中所有内容的选择器(即const formStore = useSelector(state => state.formStore);)会更干净、更快(从开发时间来看)，然后在包含整个存储的Grandparent级别创建一个Provider/Context，这样就只能访问每个级别需要的字段，并避免不必要的prop钻取。

问题：我想知道这种方法是否有效率上的反弹，以及这是否比道具钻更好。或者任何其他干净、高效的解决方案：基本上避免了我必须实现这种方法，即祖父母从商店中选择每个单独的值，然后通过道具将所有这些值传递给父母，然后通过道具将所有这些值的大部分传递给孩子。

Answer 1

如果您在ReduxProvider中englobeGrandparentComponent，您应该能够使用该树中任何组件内的useSelector访问所需的任何值。无需支柱钻孔。