如何更新 redux 存储树，然后先用数据更新另一棵树？答案

【问题标题】：How to update redux store tree and then update another tree with data from first?如何更新 redux 存储树，然后先用数据更新另一棵树？
【发布时间】：2020-11-01 16:32:33
【问题描述】：

我有一个带有数据输入的图表和用户界面。我使用 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 存储的正确方法是什么？

【问题讨论】：

标签： reactjs redux react-redux store redux-reducers

【解决方案1】：

你应该在变量中构造存储的两个部分（这样你就可以使用新的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
  };

【讨论】：