Як я можу зберегти дерево станів відновлення при оновленні?

Question 1

Першим принципом документації Redux є:

Стан усієї вашої програми зберігається у дереві об’єктів в межах одного сховища.

І я насправді думав, що добре розумію всіх директорів. Але мене зараз бентежить, що означає додаток.

Якщо додаток означає лише одну з трохи складних частин веб-сайту і працює лише на одній сторінці, я розумію. Але що, якщо додаток означає цілий веб-сайт? Чи слід використовувати LocalStorage, cookie чи щось інше для збереження дерева стану? але що, якщо браузер не підтримує LocalStorage?

Я хочу знати, як розробники зберігають своє дерево станів! :)

Question 2

Якщо ви хочете зберегти стан відновлення в процесі оновлення браузера, найкраще це зробити за допомогою проміжного програмного забезпечення redux. Перевірте проміжне програмне забезпечення redux-persist та redux-storage . Вони обидва намагаються виконати одне і те ж завдання - зберегти ваш стан відновлення, щоб його можна було зберегти та завантажити за бажанням.

-

Редагувати

Минув деякий час з того часу, як я знову переглядав це питання, але, побачивши, що інша (хоча і більш прихильна відповідь) заохочує пропонувати своє власне рішення, я вирішив відповісти на це ще раз.

На момент редагування обидві бібліотеки були оновлені протягом останніх шести місяців. Моя команда використовує redux-persist у виробництві вже кілька років і не мала жодних проблем.

Хоча це може здатися простою проблемою, ви швидко виявите, що впровадження власного рішення не тільки спричинить навантаження на обслуговування, але і призведе до помилок та проблем із продуктивністю. Перші приклади, які спадають на думку:

JSON.stringifyі JSON.parseможе не тільки погіршити продуктивність, коли вона не потрібна, але спричиняє помилки, які при обробці в такій критичній частині коду, як ваш магазин redux, можуть призвести до збою програми.
(Частково зазначено у відповіді нижче): З’ясувати, коли і як зберегти та відновити стан програми, є непростою проблемою. Робіть це занадто часто, і ви зашкодите продуктивності. Недостатньо, або якщо неправильні частини штату зберігаються, ви можете виявити більше помилок. Згадані вище бібліотеки перевірені боєм у своєму підході та пропонують кілька досить надійних способів налаштування своєї поведінки.
Частковою красою редуксу (особливо в екосистемі React) є його здатність розміщуватися в різних середовищах. На момент цього редагування, redux-persist має 15 різних реалізацій сховищ , включаючи чудову бібліотеку localForage для Інтернету, а також підтримку React Native, Electron та Node.

Підводячи підсумок, для 3kB мініфікованих + gzipped (на момент цього редагування) це не проблема, я б попросив мою команду вирішити сама.

Question 3

Редагувати 25 серпня 2019 р

Як зазначено в одному з коментарів. Оригінальний пакет редукційного зберігання переміщено в стек реакцій . Цей підхід досі зосереджений на впровадженні власного рішення щодо управління державою.

Оригінальна відповідь

Незважаючи на те, що надана відповідь була дійсною в певний момент, важливо зауважити, що оригінальний пакет редукційного сховища застарів та більше не підтримується ...

Оригінальний автор пакета redux-storage вирішив припинити проект і більше не підтримував його.

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

Все, що вам потрібно зробити, це:

1- Створіть функцію, яка повертає стан із, localStorageа потім передає стан createStoreфункції відновлення у другому параметрі, щоб гідратувати сховище

 const store = createStore(appReducers, state);

2- Слухайте зміни штату і кожен раз, коли стан змінюється, зберігайте стан localStorage

store.subscribe(() => {
    //this is just a function that saves state to localStorage
    saveState(store.getState());
});

І все ... Я насправді використовую щось подібне у виробництві, але замість використання функцій я написав дуже простий клас, як показано нижче ...

class StateLoader {

    loadState() {
        try {
            let serializedState = localStorage.getItem("http://contoso.com:state");

            if (serializedState === null) {
                return this.initializeState();
            }

            return JSON.parse(serializedState);
        }
        catch (err) {
            return this.initializeState();
        }
    }

    saveState(state) {
        try {
            let serializedState = JSON.stringify(state);
            localStorage.setItem("http://contoso.com:state", serializedState);

        }
        catch (err) {
        }
    }

    initializeState() {
        return {
              //state object
            }
        };
    }
}

а потім при завантаженні програми ...

import StateLoader from "./state.loader"

const stateLoader = new StateLoader();

let store = createStore(appReducers, stateLoader.loadState());

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

Сподіваюся, це комусь допоможе

Примітка щодо продуктивності

Якщо зміни стану дуже часті у вашій програмі, надто часто збереження в локальному сховищі може погіршити продуктивність програми, особливо якщо графік об’єкта стану для серіалізації / десеріалізації великий. У цих випадках ви можете захотіти брязкіт або задушити функцію , яка зберігає стан в LocalStorage використання RxJs, lodashабо що - щось подібне.

Question 4

Це ґрунтується на відповіді Лева (яка повинна бути прийнятою відповіддю, оскільки вона досягає мети запитання, не використовуючи жодних інших сторін).

Я створив клас Singleton, який створює Redux Store, зберігає його за допомогою локальної пам’яті та забезпечує простий доступ до його магазину через геттер .

Щоб використовувати його, просто розмістіть такий елемент Redux-Provider навколо вашого основного класу:

// ... Your other imports
import PersistedStore from "./PersistedStore";

ReactDOM.render(
  <Provider store={PersistedStore.getDefaultStore().store}>
    <MainClass />
  </Provider>,
  document.getElementById('root')
);

та додайте до свого проекту наступний клас:

import {
  createStore
} from "redux";

import rootReducer from './RootReducer'

const LOCAL_STORAGE_NAME = "localData";

class PersistedStore {

  // Singleton property
  static DefaultStore = null;

  // Accessor to the default instance of this class
  static getDefaultStore() {
    if (PersistedStore.DefaultStore === null) {
      PersistedStore.DefaultStore = new PersistedStore();
    }

    return PersistedStore.DefaultStore;
  }

  // Redux store
  _store = null;

  // When class instance is used, initialize the store
  constructor() {
    this.initStore()
  }

  // Initialization of Redux Store
  initStore() {
    this._store = createStore(rootReducer, PersistedStore.loadState());
    this._store.subscribe(() => {
      PersistedStore.saveState(this._store.getState());
    });
  }

  // Getter to access the Redux store
  get store() {
    return this._store;
  }

  // Loading persisted state from localStorage, no need to access
  // this method from the outside
  static loadState() {
    try {
      let serializedState = localStorage.getItem(LOCAL_STORAGE_NAME);

      if (serializedState === null) {
        return PersistedStore.initialState();
      }

      return JSON.parse(serializedState);
    } catch (err) {
      return PersistedStore.initialState();
    }
  }

  // Saving persisted state to localStorage every time something
  // changes in the Redux Store (This happens because of the subscribe() 
  // in the initStore-method). No need to access this method from the outside
  static saveState(state) {
    try {
      let serializedState = JSON.stringify(state);
      localStorage.setItem(LOCAL_STORAGE_NAME, serializedState);
    } catch (err) {}
  }

  // Return whatever you want your initial state to be
  static initialState() {
    return {};
  }
}

export default PersistedStore;

Розгорніть фрагмент