Обновление вложенного реагирующего состояния - PullRequest
Новая
       35

Обновление вложенного реагирующего состояния

2 голосов
/ 16 марта 2019

Я использую реагировать на редукцию (с immer), чтобы сохранить параметры и стили моего приложения после инициализации.Как изменить функцию обновления для обновления определенных стилей / параметров приложения, не изменяя другие параметры / стили? 

// reducer.js

export const common = produce((draft, action) => {
  if (!draft) {
    return {
      settings: {},
    };
  }
  switch (action.type) {
    case STORE_WIDGET_SETTINGS:
        draft.settings = action.payload.settings;
        return;

    case UPDATE_WIDGET_SETTINGS:
      draft.settings = action.payload.settings;
      return;

    default:
      return;
  }
});

Функция обновления должна только обновлять состояния параметров / стилей без изменения текущих параметров./styles.

Пример: Настройки перед обновлением: 

    options: {
      selector: '#root'
    },
    styles: {
      mainContainer: {
        backgroundColor: 'black',
        color: 'white',
      }
    }

Вызовите функцию обновления с помощью option:{selector: '#container'}.Настройки должны быть изменены на: 

options: {
  selector: '#container'
},
styles: {
  mainContainer: {
    backgroundColor: 'black',
    color: 'white',
  }
}

1 Ответ

1 голос
/ 16 марта 2019

Чтобы сделать это вручную, вам необходимо обновить каждую ветвь вашего состояния поверх существующих значений. Вы можете сделать это, распространяя существующие значения и включая новые значения. 

draft.settings = {
  ...draft.settings, // Spread existing values
  ...action.payload.settings, // Override some values from action
  options: {
   ...draft.settings.options, // Spread existing values
   ...action.payload.settings.options // Override some values from action
  },
  styles: {
   ...draft.styles,
   ...action.payload.styles,
   mainContainer: {
   ...draft.styles.mainContainer,
   ...action.payload.mainContainer
   }
  }
}

Некоторые вещи, которые вы можете сделать, чтобы упростить это:

1) Немного сгладьте структуру вашего состояния, чтобы не было так много вложенных объектов. Это облегчит обновления, и вы всегда сможете перестроить структуры, когда извлекаете их из данных (то есть селекторов). В этом вам может помочь что-то вроде Normalizr: https://github.com/paularmstrong/normalizr

2) Выделите еще несколько типов действий, чтобы не каждое обновление происходило в одном UPDATE действии. Возможно UPDATE_MAIN_CONTAINER и т. Д.

3) Подумайте об использовании функции Рамды merge, чтобы сделать это для вас: https://ramdajs.com/docs/#merge

Ссылки в этом ответе:

...