这篇文章中有提到
现在想象一下当一个状态必须被共享时会发生什么组件树中相距很远的组件。国家必须从一个组件传递到另一个组件,直到它到达它所在的位置需要的。
有人可以解释这与代码示例?
这个问题对我来说非常有趣,尽管它有否定的投票,因为它再次打开了关于为什么Redux而不是React上下文创建全局存储的讨论?。答案很简单:因为Redux有助于实现松耦合架构。
解决Redux真正问题的一个具体例子是,状态不局限于构成React上下文的组件。所以这个概念可以应用于开发一个用React构建的插件市场(即一堆微前端),在那里我们可以拥有插件a和插件b。
要访问这个市场,我们需要从核心应用程序进行身份验证,以启用对选定插件的访问。因此,在这种情况下,认证系统必须在Redux中使其横向适用于所有插件(微前端)。
为了便于理解,我们可以设置如下的文件夹结构:
|-core-app //Shell app (Where all microfrontends can be visualized)
|-App.tsx
|-etc...
|-plugin-a //Microfrontend A
|-App.tsx
|-etc...
|-plugin-b //Microfrontend B
|-App.tsx
|-etc...
|-store //Contains shell app and microfrontends root states
|-store.ts
|-reducers //Contains shell app and microfrontends reducers
|-authReducer.ts
|-etc...
这是一个可能的场景,我们可以为外壳应用程序和不同的微前端共享reducer。现在想象一下,我们需要通过身份验证才能访问这些微前端之一,因此我们需要将从壳应用程序获得的凭据数据传递给所选的微前端。一个简单的方法就是使用Redux。
现在想象一下整个项目是一个多repo:所以plugin-a, plugin-b和核心应用程序每个都有自己的repo,甚至带有reducers文件夹的存储可以是一个独立的存储库,作为必须对应用程序状态进行编码的单一事实来源。
所以我们将在这里有4个仓库,以防止项目成为一个大的单一仓库。
这是一个前端松散耦合架构的例子,我们可以将一个大项目(一个市场)拆分为子项目,这些子项目有自己的repo,甚至是横向状态的单个repo。
我希望这些想法能对你有用,给你一个你正在寻找的答案的起点。