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

Question

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

Answer 1

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

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

终极版：

填写表单时设置本地存储属性。（完成后一定要清理干净）
刷新页面，表单不完整。
当 react 挂载你的 Form 组件时，使用 componentWillMount 方法读取 localstorage 和 dispatch 数据到 reducer
reducer 更新 redux-state，后者又使用您从 localstorage 获得的属性更新组件。

如果你使用 redux 存储表单数据，dispatch localstorage 的属性。

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

希望对您有所帮助！

Answer 2

您似乎在尝试在多页上下文中使用单页应用程序框架。为了让两者更好地协同工作，您可以考虑制作自己的中间件来同步 localStorage 的状态，以创建一个在 refresh/page 导航后似乎没有丢失任何状态的应用程序。

类似于redux-logger logs both the previous and next states的方式，我可能会在 [=17] 的开头 (localStorageLoad) 和结尾 (localStorageDump) 插入一个中间件=] 函数创建（就在 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 .

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

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

// middleware/localStorageDump.js

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

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

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

Redux router - how to replay state after refresh?

reactjs

react-router

redux