Redux router - 刷新后如何重放状态？

我有一个多步骤表单应用程序，我正在努力思考如何保存我的 redux 状态并在刷新后重播它？在应用程序中后退/前进按预期工作，但浏览器刷新后，我之前的状态为空。理想情况下，我希望能够将先前的状态保存在与路径相关的会话存储中，以便稍后重播，但我不知道如何轻松做到这一点。有没有人做过类似的事情并且可以提供一些指示？谢谢。

看起来您正在尝试在多页面上下文中使用单页面应用程序框架。为了使两者更好地配合，您可以考虑制作自己的中间件来同步状态localStorage创建一个在刷新/页面导航后似乎没有丢失任何状态的应用程序。

1. 类似于这样的方式redux-logger https://github.com/fcomb/redux-logger logs 前一个和后一个状态 https://github.com/fcomb/redux-logger/blob/master/src/index.js#L48，我可能会从一开始插入中间件开始（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'));

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

只是一个想法，还没有实际尝试过。希望这有助于您开始寻找解决方案。