Хранение одного подсвойства с помощью Redux-Persist

Хранение одного подсвойства с помощью Redux-Persist

Недавно я столкнулся с необходимостью сохранить только одно подсвойство для данного ключа состояния в Redux при использовании Redux-Persist. К сожалению, вы не можете просто внести его в белый список, как whitelist: ['prop.subprop']. Благодаря помощи некоторых тем по проблемам GH [1][2] я нашел несколько решений.

1. Просто дайте редуктору собственный ключ. Это очевидно самое простое решение. Однако это может не подойти вам, если иерархическая организация вашего состояния важна для вашего приложения, а данный подраздел действительно принадлежит группе.
2. Используйте пакет, предназначенный для этого, например redux-persist-transform-filter.
3. Внесите в белый список все состояние для этого свойства, но используйте настраиваемые случаи REHYDRATE, чтобы восстановить только данное подсвойство.

Мне больше всего понравился вариант 3, так как он не требовал дополнительной библиотеки, и я мог поддерживать организованность состояния.

Вот как это выглядит для состояний редуктора, которые вы хотите сохранить:

function sidebar(state = initialState, { type, payload }) {
  switch (type) {
    case SET_SOME_PROPERTY:
      return { ...state, prop: payload.prop };
    case REHYDRATE:
      return { ...((payload.top && payload.top.subprop) || {}) };
    default:
      return state;
  }
}

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

Для тех, кого вы не хотите оставлять:

function dontKeepMe(state = initialState, { type, payload }) {
  switch (type) {
    case SET_ACTION:
      return { ...state, ...payload };
    case CLEAR_ACTION:
      return initialState;
    case REHYDRATE:
      return {};
    default:
      return state;
  }
}

Есть пара потенциальных минусов:

1. Вам нужно добавить REHYDRATE случаев ко всем редукторам подсвойств (может быть много).
2. Все свойство по-прежнему сохраняется в localStorage, и только при повторной гидратации оно частично восстанавливается.

Спасибо пользователю @acemarke за рецензирование этой статьи.