Question

我正在考虑具有react和redux的可重用列表组件的最佳数据流。

因此，这只是简单的预览。列有左侧，自定义侧和右侧。我没有填充主体，但是与其他渲染方法/组件类似。

到目前为止，这是我创建的。 https://codesandbox.io/s/confident-maxwell-fj9nc

所以有一些假设：

列表的三个方面。
- 左侧（无法编辑）。
- 自定义端（您可以在其中添加或删除更多列）
- 右侧（您无法编辑）
您可以调整列大小的大小（但仅在自定义部分上滚动）
我们想将列宽保存到localStorage
我们并不总是需要使用三个部分。
我们要使用自定义组件来呈现row标头中的列标题标题或值。
- F.e。在标题中，选择“全选”，或通过列按钮进行排序，打开模式按钮（在右侧的“更多”列选项）等。
- F.e。在主体行元素中，我们需要呈现自定义组件，例如选择单个元素，状态切换，进度条等...
我们想要分页。因此，我正在考虑如何处理此类列表。

何时定义我们要使用的部分（左侧，自定义，右侧）以及部分中应包含哪些列？例如：

InitialColumns: {
    'leftSide': ["Select", "Status", "Name"],
    'customized': ["ID", "StartDate", "EndDate", "Progress", ...],
    'rightSide': ["More"],
}

是否应该有两个单独的对象（大小和渲染器）？还是只做一个？但是，如果我们将它们保存为一个，则如何将大小保存到localStorage（因为我假设我们不想在其中保存道具和组件以进行渲染）。有时我们需要渲染组件，有时只是一个标签标题。例如：

columnsSizes: {
    'leftSide': {
        "Select": {
            width: 100,
            maxWidth: 150,
            minWidth: 75,
        },
        ....
    }
},
columnRenderers: {
    'leftSide': {
        "Select": {
            Component: SelectAll,
            props: selectAllProps,
        }
        "Status": {
            Label: "Status",
        },
        ....
    },
    "customized": {
        ...
    },
}

何时通过API数据进行映射并使用自定义组件渲染器（带有right元素props）放置在右侧（leftSide，定制的，rightSide）。我应该像下面这样吗？要在更改后不循环遍历所有映射的数据以仅编辑单个元素？

[elementId]: {
    leftSide: {
        Select: {
             Component: SelectSingleComponent,
             props: selectSingleProps,
        },
        "Status": {
             Component: ToggleStatusComponent,
             props: toggleStatusProps,
         }
    }
}

我应该将干净的API数据响应保存到redux存储中，还是还要保存映射的数据？我需要在要显示列表的组件内部映射数据，因为我需要将一些道具和东西传递给映射的数据函数。

在这种情况下处理数据流的最佳方法是什么。避免不必要的退货。为了避免进行大量计算？我只想听听对此的一些想法和想法。谢谢

可重用的自定义反应列表组件中的最佳数据流

0 个答案: