Сохранение хранилища избыточности в локальном хранилище — с помощью элемента lit

В настоящее время я пытаюсь сохранить подмножество моего редукс-состояния в локальном хранилище. Я использовал документацию из Стартовый комплект PWA для реализации базового хранилища, которое пока работает нормально, но сохраняет только полное состояние в локальном хранилище.

Это не совсем то, что я хочу, потому что, как уже упоминалось, я хочу хранить только подмножество, например некоторые конкретные результаты действий (например, state.settings вместо state).

Каждая документация и примеры хранят только полное состояние, я не нашел ни одного комментария, который соответствует моим потребностям.

Моя текущая реализация

redux-store.js

import {
  createStore,
  applyMiddleware,
  compose as origCompose,
  combineReducers
} from 'redux';
import thunk from 'redux-thunk';
import { lazyReducerEnhancer } from 'pwa-helpers/lazy-reducer-enhancer';
import { loadState, saveState } from './redux-localstorage';

import applicationReducer from './reducers/application-reducer';

export const store = createStore(
  (state, action) => state,
  loadState(),
  compose(lazyReducerEnhancer(combineReducers), applyMiddleware(thunk))
);

export default store;

store.addReducers({
  applicationReducer
});

store.subscribe(() => {
  saveState(store.getState());
});

редукс-localstorage.js

const STORAGE = '__RDX_STORAGE_TEST__';

export const saveState = state => {
  const json = localStorage.getItem(STORAGE) || '{}';
  const stringifiedNewState = JSON.stringify(state);

  if (stringifiedNewState !== json && stringifiedNewState !== '{}') {
    localStorage.setItem(STORAGE, stringifiedNewState);
  }
};

export const loadState = () => {
  const json = localStorage.getItem(STORAGE) || '{}';
  const state = JSON.parse(json);
  return state || undefined;
};

Итак, мой вопрос: возможно ли это вообще? Если да, то как я могу этого добиться?

Большое спасибо.


javascript redux local-storage lit-element
person webmonkey    schedule 02.09.2019    source источник
comment
Может быть способ сделать это в генераторе действий или промежуточном программном обеспечении, которое имеет дело только с той частью состояния, которая передана ему редюсером. Я не пробовал ни один из этих подходов, поэтому YMMV: daveceddia.com/access-redux -store-outside-реагировать   -  person    schedule 02.09.2019
comment
Самый простой способ, который я могу придумать, - это просто уничтожить состояние перед сохранением и преобразовать только это   -  person Alan Dávalos    schedule 02.09.2019

Ответы (1)


arrow_upward
1
arrow_downward

Используя базовый стартовый комплект PWA в качестве основы, если, например, вы хотите сохранить состояние магазина и состояние счетчика, но не состояние приложения, вы можете сделать что-то вроде этого:

const STORAGE = '__RDX_STORAGE_TEST__';

export const saveState = state => {
  const json = localStorage.getItem(STORAGE) || '{}';
  // take only the parts we need
  const {shop, counter} = state;
  const stringifiedNewState = JSON.stringify({shop, counter});

  if (stringifiedNewState !== json && stringifiedNewState !== '{}') {
    localStorage.setItem(STORAGE, stringifiedNewState);
  }
};

export const loadState = () => {
  const json = localStorage.getItem(STORAGE) || '{}';
  const state = JSON.parse(json);
  return state || undefined;
};

Таким образом, только эти два раздела будут записаны в localStorage.

person Alan Dávalos    schedule 02.09.2019
comment
@sebastian, в чем проблема с загрузкой? - person Alan Dávalos; 03.09.2019
comment
Возникли проблемы с вводом сохраненных данных в фактическое состояние и - если данные уже находятся в хранилище - не получить данные снова внутри действия. - person webmonkey; 03.09.2019
comment
@sebastian, вы имеете в виду, что хотите объединить текущее состояние с состоянием, поступающим из локального хранилища? - person Alan Dávalos; 05.09.2019
comment
да, именно такой сценарий. Допустим, у меня есть действие, которое отправляется каждый раз при загрузке страницы. Мне нужно проверить, есть ли уже что-то в localStorage, и если да, то новые данные извлекаться не должны. - person webmonkey; 05.09.2019
comment
Разве вы не можете просто добавить, если проверить это? - person Alan Dávalos; 05.09.2019
comment
Не уверен, что правильно использую loadState(). Он используется в createStore(), но если я console.log state внутри отправленного действия, данные из localStorage там не отображаются. - person webmonkey; 05.09.2019
comment
Я использую getState() внутри своего действия для проверки текущего хранилища, но данных из localStorage там нет, хотя я использую loadState() в методе createStore()... есть идеи? - person webmonkey; 11.09.2019
comment
Не имея возможности запустить весь код, все, о чем я могу думать, либо данные не были в локальном хранилище, поэтому они не были загружены, либо они как-то связаны со структурой хранилища как определение второго аргумента createStore функция, кажется, упоминает что-то вроде этого redux.js.org/api/createstore#arguments - person Alan Dávalos; 12.09.2019
comment
Если я просто добавлю все состояние (а не только части), оно будет там при загрузке страницы. Но раз уж я это пишу, то логично, что редуктора нет только для деталей, поэтому я думаю, что надо прикрепить его к соответствующему редьюсеру... Спасибо! - person webmonkey; 12.09.2019