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

Question

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

Answer 1

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

1. 类似于redux-logger记录前一个和下一个状态的方式,我可能首先在函数创建的开始(localStorageLoad)和结束(localStorageDump)中插入一个中间件createStoreWithMiddleware(就在之前redux-logger):

// store/configureStore.js

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

2. 然后在初始化应用程序以在应用呈现之前加载存储状态时立即执行初始操作:

// 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,用该有效负载替换状态,有效地重新启动应用程序,就像之前一样.

3. 要完成循环,您需要一个链接localStorageDump末尾的中间件,将每个简化状态对象保存到其中localStorage.像这样的东西:

// middleware/localStorageDump.js

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

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