0

假设我有一个音乐商店应用程序，用户可以在其中搜索吉他。在初始页面加载时，我获取了几种吉他来显示：（原声、电声和贝斯）。吉他结果页面通过单个 API 调用一起返回，但永远不会一起显示。因此，它们必须在某个时候进行过滤。要查看不同类别的吉他，用户将从 React 组件切换他们查看的类别。

似乎有两种主要方法可以使用不可变和 redux 来解决这个问题。

在策略一中，我在数据到达时过滤 category 上的数据，并将其单独存储在 redux 存储中。当我想检索数据时，我在选择器中指定类别。

在策略 2 中，所有进来的 API 数据都存储在一个聚合列表“all”中。当我想检索特定类别的吉他时，我使用选择器从聚合数据中过滤和显示。

策略一：

// REDUCER
export const GuitarReducer = (state, action) => {
    const { payload, type } = state; 

    switch (type) {
        case "acoustic": {
            let existing = // GET EXISTING
            return state.set("acoustic",
                existing.concat(payload.filter(result => (result.category === "acoustic")))
            )
        }
        case "electric": {
            let existing = // GET EXISTING
            return state.set("electric",
                existing.concat(payload.filter(result => (result.category === "electric")))
            )    
        }
        case "bass": {
            let existing = // GET EXISTING
            return state.set("bass",
                existing.concat(payload.filter(result => (result.category === "bass")))
            )
        }
    }
}

// SELECTOR
export const selectCategory = createSelector(
    [getCategory, getGuitarReducer],
    (category, guitarReducer) => {
        return GuitarReducer.get(category);
    }
);

策略二：

// REDUCER
export const GuitarReducer = (state, action) => {
    const { payload, type } = state;
    ...
    let existing = // GET EXISTING
    ...
    return state.set("all",
        existing.concat(payload)
    )
}

// SELECTOR
export const selectCategory = createSelector(
    [selectAllGuitars],
    (category, guitars) => {
        return guitars.filter(guitar => (guitar.category = category));
    }
);

一种模式会比另一种模式提供更好的性能吗？哪种模式更好地遵循 redux 的最佳实践？

我听说最好选择选择器来计算派生数据，并且当对数据执行另一个操作（例如在选项卡之间切换）时，记忆将缓存结果以供使用。因此，我不清楚更喜欢哪种策略。

4

1 回答 1

1

我认为selectors主要集中在不重新计算组件中的派生数据（以及在其他组件中重用它的好处）。

您的示例中的两个都是很好的做法，因此我将对其进行如下重构。您希望您的数据存储看起来像选择一还是选择二（原始 API 响应）。您希望它延迟加载（选择两个），还是为所有吉他加载类别。

选择 1

优点

  • 以对您的应用程序更有用的格式存储在数据存储中。
  • 选项二在类别更改时重新计算，选项一在开始时计算并且很可能性能更高。

缺点

  • 无法访问原始 API 响应。
  • 对 API 请求执行过滤和分类，而不是懒惰地执行（老实说不是一个大问题）。

选择 2

优点

  • 存储在数据存储区原始 API 响应中。
  • 懒惰地计算所需的吉他类别。

缺点

  • 对类别更改再次执行计算。（注意reselect只有缓存大小为 1）。
  • 记忆也需要额外的记忆。
于 2020-03-01T05:28:59.943 回答