如何更新 redux 存储树，然后用第一个数据更新另一棵树？

Question

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

此结构基于show/hide图表中某些数据的能力。

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 store 的正确方法是什么？

Answer 1

你应该在变量中构建存储的两个部分（这样你就可以使用新的chartSettingsData）然后return:

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
  };

如何更新 redux 存储树，然后用第一个数据更新另一棵树？

How to update redux store tree and then update another tree with data from first?

store

reactjs

redux

react-redux

redux-reducers