Question

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

Answer 1

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

与redux-logger日志both the previous and next states的方式类似，我可能首先插入一个中间件（localStorageLoad）和结束（localStorageDump） createStoreWithMiddleware函数创建（在redux-logger之前）：

// store/configureStore.js

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

然后在您的应用初始化应用以在应用呈现之前加载存储状态时启动初始操作：

// index.js

const store = configureStore();

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

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

localStorageLoad将处理INIT操作并发送某种SET_STATE操作，该操作将包含以前保存在localStorage中的状态的有效内容。< / p>

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

然后，添加一个reducer，用该有效负载替换状态，有效地重新启动应用程序，就像以前一样。

要完成循环，您需要一个localStorageDump中间件，它位于链的末尾，将每个简化状态对象保存到localStorage。这样的事情：

// middleware/localStorageDump.js

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

只是一个想法，还没有真正尝试过。希望有助于您开始寻求解决方案。

Answer 2

您无法在刷新时存储状态这是正常的。通常，您将这些存储在cookie或Web存储中。

Cookie在浏览器，服务器之间同步，并在您执行的每个请求中设置。
Localstorage为您提供最多5MB的数据存储空间，永远不会随请求一起发送。

终极版：

填写表单时设置localstorage属性。（完成后务必将其清理干净）
使用不完整的表单刷新页面。
如果反应装载了Form组件，请使用componentWillMount方法将localstorage和dispatch数据读取到减速器
reducer更新redux-state，然后使用localstorage获得的属性更新组件。

如果使用redux存储表单数据，则调度localstorage的属性。

如果没有读取Form组件中的localstorage并设置初始值。

希望这有帮助！

Redux路由器 - 刷新后如何重播状态？

2 个答案: