如何使用 Redux 时间旅行来处理错误答案

【问题标题】：How to use Redux time travel to handle errors如何使用 Redux 时间旅行来处理错误
【发布时间】：2016-12-02 09:09:33
【问题描述】：

我试图弄清楚如何处理 React/Redux 应用程序中的错误，并发现 Redux 由于不可变状态模式而允许向后遍历状态连续体。如果 post 失败，在 Redux 上及时回溯，同时增加组件的内部重试计数器，并最终调度必要的操作，这是一个疯狂的想法吗？我将如何使用 react-redux 进入之前的状态？

【问题讨论】：

标签： javascript exception reactjs redux react-redux

【解决方案1】：

您正在寻找的是一种称为“乐观更新”的模式。例如，假设网络调用会成功，您在网络调用之前调度一个动作。如果调用失败，那么您分派第二个操作来恢复第一个操作。

“时间旅行调试”需要使用 Redux DevTools。 DevTools 实际上记录了所有派发的动作，并且当您在历史记录中来回跳转时，将重播该点的动作以确定当前状态应该是什么。在生产中，旧的操作和旧的状态不会被记录下来（尽管你当然可以自己构建一些东西来做那种事情）。

【讨论】：

【解决方案2】：

您可以使用适用于 chrome 的 redux 开发人员工具来利用漂亮的时间旅行 UI/UX。继续在 Chrome 商店中安装 redux 开发工具。

此外，您需要告诉您的 redux 商店您正在使用 redux 开发工具。为此，您需要对 createStore() 方法进行一些调整。

查看this repo 的描述以了解它的实际应用。

参考此代码在您的 redux 存储中注入开发工具增强器-

import { createStore, applyMiddleware, compose } from 'redux';
import createReducer from './reducers';

const devtools = window.devToolsExtension || (() => noop => noop);

export default function configureStore(initialState = {}, middlewares) {
  const enhancers = [
    applyMiddleware(...middlewares),
    devtools(),
  ];

  const store = createStore(
    createReducer(),
    initialState,
    compose(...enhancers)
  );

  return store;
}

【讨论】：