看起来您正在尝试在多页上下文中使用单页应用程序框架。为了让两者更好地结合在一起，您可以考虑制作自己的中间件来同步状态，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);
}

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

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

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

您不能在刷新时存储状态，这是正常的。通常，您将这些存储在 cookie 或网络存储中。

• Cookie 在浏览器、服务器之间同步，并在您执行的每个请求上设置。
• Localstorage为您提供最多 5MB 的空间来存储数据，并且永远不会随请求一起发送。

还原：

1. 填写表单时设置 localstorage 属性。（完成后一定要清洗）
2. 使用不完整的表单刷新页面。
3. 当react坐骑您的Form部件，使用componentWillMount方法来读取localstorage和dispatch所述数据到减速器
4. reducer 更新 redux-state，然后使用您从 localstorage 获得的属性更新组件。

如果您使用 redux 来存储表单数据，则调度 localstorage 的属性。

如果没有读取Form组件内部的localstorage并设置初始值。

希望这可以帮助 ！