Question

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

Answer 1

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

“时间旅行调试”需要使用Redux DevTools。 DevTools实际上记录了所有被调度的动作，当你在历史中来回跳转时，将重放到那一点的动作以确定当前状态应该是什么。在制作中，没有记录旧动作和旧状态（尽管你自己可以自己做一些东西来做那种事情）。

Answer 2

您可以将redux开发人员工具用于chrome，以获得时间旅行的优秀UI / UX。继续在Chrome商店中安装redux dev工具。

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

查看this repo的说明，了解它的实际效果。

请参阅此代码，在redux store中注入dev-tool增强器 -

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

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

2 个答案: