小编典典

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

reactjs

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


阅读 308

收藏
2020-07-22

共1个答案

小编典典

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

  1. redux-logger记录前一个状态和下一个状态的方式类似,我可能会从在函数创建的开始(localStorageLoad)和结束(localStorageDumpcreateStoreWithMiddleware(恰好在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);
    }

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

2020-07-22