Question

我对如何在使用Atomic Design的复杂应用中实现Redux感到不明确。

请记住，Atomic Design是一个由五个不同阶段组成的方法，它们共同创建界面设计。这五个阶段是：

Atoms ，如按钮，文字输入，
Molecules ，例如由一个输入和一个按钮组成的搜索字段
生物，如搜索表单，
模板，如通用模板，
页面就像使用通用模板的搜索页面一样，搜索有机体，分子或原子，如搜索表单，项目列表，页眉和页脚。

想象一下这样的应用程序：

App (page)
    Header (organism IN the template)
        Menu (molecule)
            Button (atom)
            ...
            Button (atom)
        Link (atom)
    Content (div)
        Form (organism IN the page)
            Field (molecule)
                Label (atom)
                Input (atom)
            Field (molecule)
                Label (atom)
                Input (atom)
            Button (atom)
    Footer (organism IN the template)
        Link (atom)

在哪个阶段，实施redux？

每个生物体中的减速器/容器，按钮动作？
模板中的reducer / container（对于常见组件），按钮操作？
另一种策略？

Answer 1

我们在工作中有类似的案例：

模板＆amp;布局组件（Organic）
特定页面（Page）
业务组件（Organisms：特定页面的特定业务组件）
技术组件（Molecules＆amp; Atoms）

Redux的主要用例是能够通过多个组件共享公共数据。页面。在许多情况下，它是共享的应用程序数据：连接的用户数据，标识符，注释列表，银行帐户列表，等等......因此，必须使用Redux状态数据填充页面和功能组件。这意味着它们从Redux状态接收数据并将这些数据作为道具传递给子组件。

使用“原子设计”，表示只有Page和Organisms为connected到Redux State。

在我们的工作案例中：

“特定页面”和“业务组件”连接到Redux。
“技术组件”仅使用自己的React状态。最好让技术组件处理自己的状态，因为它可以简化外部项目的集成。拥有使用Redux的组件意味着项目需要添加需要的reducers才能使用该组件。
“模板和布局组件”不使用状态，仅依赖于道具。

在复杂SPA应用中使用redux

1 个答案: