0

我有一个带有数据输入的图表和用户界面。我使用 redux 来存储图表数据。我有2棵树。一 - 用于图表组件。它包含数字数组（轴坐标）。第二个是ui。它包含对象数组：{轴坐标，可见性}。

这种结构基于在图表中显示/隐藏某些数据的能力。

在此处输入图像描述

Redux 商店

const initialState = {
  chartSettings: {
    ...
    axisValues: [7, 9, 1, 13, 24, ...]
  },
  chartSettingsData: {
    ...
    axisValues: [
     {value: 7, visibility: true},
     {value: 9, visibility: false},
     ...
    ]
  }
};

我希望我的图表组件从存储中获取清晰的数据数组，而不需要可见性逻辑。但我需要它用于ui。所以我来到了这个结构。可能是错的。但我没有其他想法。

因此，当我单击复选框时，我会更改存储对象 chartSettingsData 中的可见性。然后，我需要用图表的数据更新另一棵树。在 reducer 中更新 chartSettingsData 后，我尝试克隆过滤数组。

case "UPDATE_ITEM_VISIBILITY":
  return {
    ...state,
    chartSettingsData: {
      ...state.chartSettingsData,
      axisValues: state.chartSettingsData.axisValues.map((item, i) =>
        i === index
          ? { value: item.value, visibility: !item.visibility }
          : item
      ),
    },

    chartSettings: {
      ...state.chartSettings,
      axisValues: (() => {
        const filtered = state.chartSettingsData.axisValues.filter(
          (item) => item.visibility
        );
        return filtered.map((item, i) => item.value);
      })(),
    }

但是我在 chartSettingsData 更新之前在 chartSettings 中获取数据。在这种情况下，更新 redux 存储的正确方法是什么？

4

1 回答 1

1

您应该在变量中构造存储的两个部分（这样您就可以使用 new chartSettingsData），然后返回：

case "UPDATE_ITEM_VISIBILITY":
  const chartSettingsData = {
    ...state.chartSettingsData,
    axisValues: state.chartSettingsData.axisValues.map((item, i) =>
      i === index
        ? { value: item.value, visibility: !item.visibility }
        : item
    ),
  };

  const chartSettings = {
    ...state.chartSettings,
    axisValues: (() => {
      const filtered = chartSettingsData.axisValues.filter(
        (item) => item.visibility
      );
      return filtered.map((item, i) => item.value);
    })(),
  };

  return {
    ...state,
    chartSettingsData,
    chartSettings
  };
于 2020-07-12T10:42:44.743 回答