Подтвердить что ты не робот

Маршрутизатор Redux - как воспроизвести состояние после обновления?

У меня многошаговое приложение формы, и я изо всех сил пытаюсь понять, как я могу сохранить состояние редукта и воспроизвести его после обновления, например? Переход назад/вперед в приложении работает так, как ожидалось, но после обновления браузера мое предыдущее состояние пуст. В идеале я хотел бы сохранить предыдущее состояние в хранилище сеансов, относящееся к пути, так что я могу воспроизвести его позже, но я не вижу, как легко это сделать. Кто-нибудь сделал что-нибудь подобное и может предоставить некоторые указатели? Благодарю.

4b9b3361

ОТВЕТЫ

Ответ 1

Похоже, вы пытаетесь использовать одностраничную платформу приложения в контексте с несколькими страницами. Чтобы сделать эти игры более приятными, вы можете изучить свое собственное промежуточное программное обеспечение, которое синхронизирует состояние с и из localStorage, чтобы создать приложение, которое, похоже, не потеряло какое-либо состояние после обновления/навигации по страницам.

  • Подобно тому, как redux-logger регистрирует как предыдущее, так и следующее состояние, я бы возможно начинать с вставки промежуточного программного обеспечения в начале (localStorageLoad) и завершения (localStorageDump) создания функции createStoreWithMiddleware (прямо перед redux-logger):
// store/configureStore.js

const createStoreWithMiddleware = applyMiddleware(
    localStorageLoad, thunk, promise, localStorageDump, logger
)(createStore);
  1. Затем запустите начальное действие, когда вы инициализируете приложение, чтобы загрузить сохраненное состояние до того, как ваше приложение отобразит:
// index.js

const store = configureStore();

store.dispatch({ type: 'INIT' });

ReactDOM.render(<App />, document.getElementById('root'));

localStorageLoad будет обрабатывать действие INIT и отправить какое-то действие SET_STATE, которое будет содержать полезную нагрузку с состоянием, которое ранее было сохранено в localStorage.

// middleware/localStorageLoad.js

export default store => next => action => {
    const { type } = action;
    if (type === 'INIT') {
        try {
            const storedState = JSON.parse(
                localStorage.getItem('YOUR_APP_NAME')
            );
            if (storedState) {
                store.dispatch({
                    type: 'RESET_STATE',
                    payload: storedState
                });
            }
            return;
        } catch (e) {
            // Unable to load or parse stored state, proceed as usual
        }
    }

    next(action);
}

Затем добавьте редуктор, который заменяет состояние этой полезной нагрузкой, эффективно перезагружая приложение, как было ранее.

  1. Чтобы завершить цикл, вам понадобится localStorageDump промежуточное программное обеспечение, которое приходит в конце цепочки, которое сохраняет каждый объект уменьшенного состояния в localStorage. Что-то вроде этого:
// middleware/localStorageDump.js

export default store => next => action => {
    const state = store.getState();
    localStorage.setItem('YOUR_APP_NAME', JSON.stringify(state));
    next(action);
}

Просто идея, на самом деле не попробовала. Надеюсь, что это поможет вам начать решение.

Ответ 2

Вы не можете сохранять состояние при обновлении, это нормально. Обычно вы храните эти куки файлы или хранилище в Интернете.

  • Файлы cookie синхронизируются между браузером, сервером и устанавливаются при каждом запросе, который вы выполняете.
  • Localstorage дает вам до 5 МБ для хранения данных и никогда не будет отправлять их с запросом.

Redux:

  • Установите свойства localstorage при заполнении формы. (обязательно очистите его по завершении)
  • Обновить страницу с неполной формой.
  • Когда реакция монтирует ваш компонент Form, используйте метод componentWillMount для чтения данных localstorage и dispatch для редуктора
  • Редуктор обновляет состояние redux, которое, в свою очередь, обновляет компонент с помощью свойств, которые вы получили от localstorage.

Если вы используете reducex для хранения данных формы, отправьте свойства localstorage.

Если вы не прочитали localstorage внутри компонента Form и установите начальные значения.

Надеюсь, это поможет!