Как обновить дерево хранилища redux, а затем сначала обновить другое дерево данными?

Question

У меня есть диаграмма и пользовательский интерфейс с вводом данных для него. Я использую redux для хранения данных для диаграммы. У меня 2 дерева. Один - для графической составляющей. Он содержит массив чисел (координаты оси). И второе по пользовательскому интерфейсу. Он содержит массив объектов: {координата оси, видимость}.

Эта структура основана на возможности отображать / скрывать некоторые данные с графика.

введите описание изображения здесь

Redux store

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

Я хочу, чтобы мой компонент диаграммы получал чистый массив данных из хранилища, без журнала видимости c. Но мне это нужно для ui. Так я пришел к этой структуре. Может это и не так. Но у меня нет других идей.

Итак, когда я устанавливаю флажок, я изменяю видимость в хранилище объекта chartSettingsData. И затем мне нужно обновить другое дерево с данными fo диаграммы. Я попробовал клонировать отфильтрованный массив после обновления 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);
      })(),
    }

Но я получаю данные в chartSettings до обновления chartSettingsData. Как правильно обновить redux store в этом случае?

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