我有一个多步骤表单应用程序,而我正在努力解决如何保存我的redux状态并在例如刷新后重播它的问题?在应用程序中前进/后退可以按预期工作,但是刷新浏览器后,我以前的状态为空。理想情况下,我希望能够将与路径相关的先前状态保存在会话存储中,以便以后可以重播,但是我不知道如何轻松地做到这一点。有没有人做过这样的事情并且可以提供一些指示?谢谢。
看来您正在尝试在多页上下文中使用单页应用程序框架。为了使两者更好地配合使用,您可以研究制作自己的中间件,该中间件使状态之间来回同步,localStorage以创建在刷新/页面导航后似乎没有丢失任何状态的应用程序。
localStorage
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。
INIT
SET_STATE
// 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,用该负载替换状态,从而像以前一样有效地重新启动应用程序。
// middleware/localStorageDump.js export default store => next => action => { const state = store.getState(); localStorage.setItem('YOUR_APP_NAME', JSON.stringify(state)); next(action); }
只是一个想法,实际上还没有尝试过。希望能帮助您开始寻求解决方案。