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

小编典典

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

reactjs

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

阅读 307

2020-07-22

共1个答案

小编典典

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

与redux-logger记录前一个状态和下一个状态的方式类似，我可能会从在函数创建的开始（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。

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

只是一个想法，实际上还没有尝试过。希望能帮助您开始寻求解决方案。

2020-07-22