如何避免反应数据表中的重复逻辑答案

【问题标题】：How to avoid duplicating logic in react data table如何避免反应数据表中的重复逻辑
【发布时间】：2018-05-09 06:30:45
【问题描述】：

我正在寻求有关在 react 中构建实体数据表组件的帮助。

我正在使用 react-virtualized 并试图确定如何封装用于服务器端排序/过滤/分页/行删除/等的样板功能。

我从一个简单的、自包含的组件开始，它只需要一个 API 路径，并通过本地状态自行处理所有事情。

为了能够从表格组件外部更新/删除/添加/刷新记录，我将表格状态/逻辑移动到管理表格的容器组件中，以及一些按钮和模式窗口。

但是，既然所有用于排序/过滤/分页的处理程序都在这个容器中，似乎它们都必须被复制才能重新用于其他要求略有不同但排序/过滤完全相同的表/分页。

如何在表格组件中包含样板表格逻辑，同时还能从组件外部更新/删除/添加/刷新记录？

为了形象化，这里有一个人为的例子，所有的逻辑和状态都封装在 TableWithFilter 组件中：

<SomeEntityList>
    <TableWithFilter apiPath={this.props.apiPath}>
        <FilterBar />
        <Table /> 
    <TableWithFilter>
</SomeEntityList>

过滤方法和状态可以存在于 TableWithFilter 中：

TableWithFilter._handleFilter() {
    // get filter, inject filter into api path, get records, update state 
}

现在，假设我们需要添加一个模式，以便我们可以连续编辑值：

<SomeEntityList>
    <EditRowModal />
    <TableWithFilter>
        <FilterBar />
        <Table />
    <TableWithFilter>
</SomeEntityList>

然后必须将状态和过滤方法上移到 SomeEntityList 组件，以便模态可以更改表中的记录：

SomeEntityList._handleFilter() { 
    //get filter, inject filter into api path, get records, update state 
}

SomeEntityList._editRow() { 
    // make update call, update state 
}

假设我将有几十个不同的 SomeEntityListA/SomeEntityListB/SomeEntityListC（有些有编辑记录模式，有些有添加新记录的按钮等），我将如何避免在几十个地方重复过滤逻辑？

【问题讨论】：

等等，为什么不将过滤器作为参数传递给<TableWithFilter /> 或实际使用过滤器的任何元素？'

标签： javascript reactjs datatable

【解决方案1】：

在我看来，您有两种选择。

如果可重用过滤器的逻辑功能正常，您可以将它们完全移出组件并将它们放在utils 目录或其他目录中。
使用higher-order components。

编辑

为什么不直接将过滤器作为参数传递？

【讨论】：

这似乎是一个 HOC 的好地方，但我不确定那会是什么样子。 HOC 理论上可以处理排序/过滤/分页逻辑，但不确定外部组件如何与表交互，例如删除/添加/编辑记录。有什么具体的想法吗？

【解决方案2】：

好的，过了一段时间，我决定回到这个来帮助其他人。

此后，我开始在项目中加入 redux（出于多种原因）。特别是关于这个主题，我现在有一个 CreateSearchableTable 函数，它充当创建命名空间 SearchableTable reducer 的工厂。这允许重用所有获取/无限滚动/分页/过滤/排序逻辑。我目前正在寻找删除重复动作创建者的最佳方法。

【讨论】：