Как сохранить дерево состояний redux при обновлении?

первый принцип документации Redux:

состояние всего приложения хранится в дереве объектов в одном хранилище.

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

Если приложение означает только одну из небольших сложных частей на веб-сайте и работает всего на одной странице, Я понимаю. Но что, если приложение означает весь сайт? Я Должен использовать LocalStorage или cookie или что-то еще для сохранения дерева состояний? но что делать, если браузер не поддерживает LocalStorage?

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

27
flux reactjs redux

3 ответов

Если вы хотите сохранить состояние redux в обновлении браузера, лучше всего сделать это с помощью промежуточного по redux. Проверьте redux-persist и redux-хранение промежуточное. Они оба пытаются выполнить одну и ту же задачу хранения состояния redux, чтобы его можно было сохранить и загрузить по желанию.

32

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

оригинальный автор пакета redux-storage решил отказаться от проекта и больше не поддерживается.

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

все, что вам нужно сделать, это:

1-Создайте функцию, которая возвращает состояние из localStorage а затем передать состояние в createStoreфункция redux во втором параметре, чтобы увлажнить магазин

 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 или что-то подобное.

34

исходный вопрос

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

Ну, так как я не вижу этого ответа, и вы использовали метку React; часто React webapps реализованы как SPA (одностраничное приложение), что не обновите браузер. Они могут сделать это!--9-->похоже, что это так изменив URL-адрес, который вы видите в адресной строке. Популярный способ сделать это react-router.

но все же состояние SPA не выдерживает обновления браузера, так что когда redux-persist приходит.

0