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

Ответ 1

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

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

// store/configureStore.js

const createStoreWithMiddleware = applyMiddleware(
    localStorageLoad, thunk, promise, localStorageDump, logger
)(createStore);

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

// 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);
}

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

3. Чтобы завершить цикл, вам понадобится 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 и установите начальные значения.

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