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

Question

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

Answer 1

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

"时间旅行调试"需要使用Redux DevTools。DevTools实际上会记录所有调度的操作，当你在历史中来回跳转时，会回放到那时的操作，以确定当前状态。在生产中，旧的操作和旧的状态不会被记录（尽管你当然可以自己构建一些东西来做这类事情）。

Answer 2

您可以使用chrome的redux开发工具来利用时间旅行的良好UI/UX。继续在Chrome商店上安装redux开发工具。

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

请查看此回购的描述，了解其实际操作情况。

参考此代码，在您的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;
}