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

Question

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

Answer 1

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

1. 类似于redux-logger 记录both the previous and next states 的方式，我可能首先在createStoreWithMiddleware 函数创建的开头（localStorageLoad）和结尾（localStorageDump）插入一个中间件（右之前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);
}

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

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

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

Answer 2

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

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

还原：

1. 填写表单时设置本地存储属性。 （完成后一定要清理干净）
2. 使用不完整的表单刷新页面。
3. 当 react 挂载你的Form 组件时，使用componentWillMount 方法将localstorage 和dispatch 的数据读取到reducer
4. reducer 会更新 redux-state，而 redux-state 又会使用您从 localstorage 获得的属性更新组件。

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

如果不读取Form组件内部的localstorage并设置初始值。

希望这会有所帮助！