Redux 路由器 - 刷新后如何重放状态? [英] Redux router - how to replay state after refresh?

问题描述

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

I have a multi-step form application, and I'm struggling with getting my head around how I can save my redux state and replay it after a refresh for example? Going back/forward in the app works as expected, but after a browser refresh, my previous state is empty. Ideally I'd like to be able to save prior state in session storage relating to a path, so that I can replay later, but I'm not seeing how I can do that easily. Has anyone done anything like this and can provide some pointers? Thanks.

推荐答案

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

It looks like you're trying to use a single-page app framework within a multiple-page context. To make the two play nicer together, you could look into making your own middleware that synchronizes state to and from localStorage to create an app that appears to not have lost any state after a refresh/page navigation.

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

1. Similar to the way that redux-logger logs both the previous and next states, I'd probably start by plugging in a middleware at the beginning (localStorageLoad) and end (localStorageDump) of the createStoreWithMiddleware function creation (right before 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 中.

The localStorageLoad would handle the INIT action and dispatch some sort of SET_STATE action, which would contain a payload with the state that was previously saved in 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);
}

然后，添加一个用该负载替换状态的减速器，有效地重新启动应用程序，就像以前一样.

Then, add a reducer which replaces the state with that payload, effectively rebooting the app as it was previously.

1. 要完成循环，您需要一个 localStorageDump 中间件，它位于链的末端，将每个简化的状态对象保存到 localStorage 中.像这样:

1. To complete the loop, you'd need a localStorageDump middleware that comes at the end of the chain that saves each reduced state object into localStorage. Something like this:

// middleware/localStorageDump.js

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

只是一个想法，还没有真正尝试过.希望能帮助您开始寻找解决方案.

Just an idea, haven't actually tried it. Hope that helps get you started towards a solution.

这篇关于Redux 路由器 - 刷新后如何重放状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！