反应上下文：上下文应该有多精细？

Question

我和我的同事正在使用Hooks＆Context构建一个React应用。我已经构建了3个模态组件，每个组件都有自己的上下文：

  

模式A <>上下文A   模式B <>上下文B   模态C <>上下文C

这3个模式组件之间共享2个子组件：

  

子组件a   子组件b

模式A使用子组件a。模式B使用子组件b。模态C使用这两个子组件。由于子组件的这种共享，我要做的是从父组件的关联上下文中将state和dispatch传递给子组件。

此方法使用了以下文章中介绍的最佳做法：

• https://kentcdodds.com/blog/how-to-use-react-context-effectively
• https://kentcdodds.com/blog/state-colocation-will-make-your-react-app-faster

第一个示例显示了如何将上下文提供程序实现为两个嵌套上下文。第二个强调了这一原则：Place code as close to where it's relevant as possible。

这种方法一直很好，但是现在一位同事需要将我的模态集成到他正在构建的组件中。为了实现可视化，请考虑管理员的“用户管理”页面，其中一个链接为“添加用户”，该链接称为我的模态之一。

他遇到的挑战是，为了合并每个模式，他需要同时合并模式及其关联的上下文。

问题/问题是这些：

1. 多条路由需要共享1个以上的上下文提供程序。
2. 只有将提供者包装在Router组件或单个路由周围，我们才能实现这一目标。
3. 包装单个路由将来会引起问题，因为给定的上下文提供者很可能需要包含在其他路由中。
4. 另一方面，将路由器与所有上下文提供程序包装在一起实际上将为我们提供全局状态，而我们假设React Context设计为比Redux更精细。

所以我们正在努力解决这个设计问题，想知道是否有人遇到过类似的事情？