为React / Redux应用程序构造状态

Question

我正在努力构建一个React / Redux应用程序-我列出了我为解决方案尝试的选项的问题，但没有“感觉正确”的东西，因此希望这里的人能为我提供帮助。

这是我的组件结构的大致概念：

<Dashboard>
    <Widget1 dataFetcher=()=>{}>
        <Header>
            <Title> ... </Title>
            <Menu>
                <MenuItem {..cosmeticProps} text="OpenSettings" onClick=handleSettingsOpen>
                <MenuItem {..cosmeticProps} text="Delete" onClick=handleWidgetDelete>
            </Menu>
        </Header>
        <Body>
            <Settings isOpen isValid fields onValidate onAutoComplete.. </Settings>
            { ifError ? ErrorLayout}
            { ifFetching ? FetchingLayout }
            { ifValid ? DataLayout }
        </Body>
    </Widget1>
    ...
</Dashboard>

这是状态结构（显示事件处理程序是为了保持完整性，而不是因为它们显式属于状态）

Dash: {
    widgets: {
        widget1: {
            menu: {
                isOpen: true,

                handleSettingsOpen: ()=>{}
                handleWidgetDelete: ()=>{}
            }
            settings: {
                isOpen: true,
                isValid: true,
                fields: [...],

                onValidate: ()=>{},
                onAutoComplete:()=>{},
                onSave:()=>{}
            }
            data: {
                isFetching: false,
                isError: false,
                items: [],

                fetch: ()=>{}
                parse: ()=>{}
            }
        }
        ...
    }
}

选项1：

连接仪表板，并根据需要将其传递给子级。 即

连接 - dashboard.js

stateToProps ()=> { widgets: state.widgets }
dispatchToProps ()=> { handleSettingsOpen, handleWidgetDelete handleSettingsSave ... } //Dashboard would bind these with moduleid while rendering

优点：其他一切都可以是“哑巴”，单一的真理来源
缺点：对状态了解太多，只是传下来的道具/调度清单使阅读变得难看

选项2：

构建一个“已连接”的小部件，并在仪表板中使用它。

连接-widget.js

stateToProps ()=> { state.widgets[props.widgetid] }
dispatchToProps ()=> { handleSettingsOpen, handleWidgetDelete handleSettingsSave ... }

优点：仪表板现在可以是一个哑容器，无论如何都可以
缺点：Widget对状态结构了解得太多？

选项3：构建各个组件的连接版本并稍后组装

连接-menu.js

stateToProps ()=> { state.widgets[props.widgetid].menu }
dispatchToProps ()=> { handleSettingsOpen, handleWidgetDelete }

连接-settings.js

stateToProps ()=> { state.widgets[props.widgetid].settings }
dispatchToProps ()=> { handleSave, handleValidate }

优点：每个组件都能准确获取其关心的状态
缺点：监听状态的组件过多？ 还有谁“组装”它的问题。

选项3.1：将状态重构为：

Dashboard: {
    widgets: { ..}
    menu: {widgetid: {isopen ..}}
    settings: {widgetid: {widgetid ..}}
}

（国家采用这种方法比较讨人喜欢，但不确定是否重要）

总体而言，这可能是幼稚的/显而易见的，但对我而言，折衷方案似乎是让父母对州知之甚少，或者对孩子的子女过分了解太多。 您将如何处理？

Answer 1

选项3：“菜单”和“设置”知道“ widgetId”是否有意义？ 如果它们分别分别接收属性菜单或设置，它们似乎将更可重用。

选项1：是否要为支持的每个窗口小部件组件更新Dashboard stateToProps和dispatchToProps？

由于这些原因，我喜欢选项2，即连接的Widget1。

至于状态嵌套深度， Redux异步操作具有“关于嵌套实体的说明”，建议避免使用深度嵌套的实体以避免重复数据。

在您的示例中，如果任何窗口小部件具有重复的菜单或设置状态对象，则标准化状态将允许窗口小部件共享相同的状态。

Dashboard: {
    widgets: {
        widget1: {menuId:1, settingsId: 1, ...},
        widget2: {menuId:1, settingsId: 1, ...},
    },
    menus: {1: {...}},
    settings: {1: {...}}
}

实际上，通过这种结构，“菜单和设置”仅需要知道menuId或settingsId，而无需知道widgetId。 我仍然更喜欢连接小部件。

为React / Redux应用程序构造状态

问题描述

1 个解决方案

解决方案1
0 2016-04-06 16:26:35

为React / Redux应用程序构造状态

问题描述

1 个解决方案

解决方案1 0 2016-04-06 16:26:35

解决方案1
0 2016-04-06 16:26:35