Javascript 如何在redux中取消/忽略操作

有没有办法取消或忽略某个操作

或者更确切地说，忽略某个操作的最佳/推荐方式是什么

我有以下action creator，当我在action creator中输入一个无效的大小（例如

'some_string'

）时，除了得到我自己的警告消息外，我还得到：

未捕获错误：操作必须是普通对象。使用自定义中间件进行异步操作。

import { SET_SELECTED_PHOTOS_SIZE } from './_reducers';

export default (size=0) => {
  if (!isNaN(parseFloat(size))) {
    return {
      type: SET_SELECTED_PHOTOS_SIZE,
      size: size,
    };
  } else {
    app.warn('Size is not defined or not a number');
  }
};

我在Discord（reactiflux）中的

redux

-频道中讨论过这一点，其中一个建议是像这样使用redux thunk：

export default size => dispatch => {
  if (!isNaN(parseFloat(size))) {
    dispatch({
      type: SET_SELECTED_PHOTOS_SIZE,
      size: size,
    });
  } else {
    app.warn('Size is not defined or not a number');
  }
}

---

另一个选项是忽略减速器内部的操作。这确实会使减速机“更胖”，因为它有更多的责任，但它使用更少的thunk操作，这使得调试更容易。我可以看到thunk模式失控了，因为我将被迫在几乎每一个动作中使用它，如果你有很多批量动作的话，那么维持批量动作会有点困难。

忽略动作创建者中的动作基本上是将它们视为命令处理程序，而不是事件创建者。当用户点击按钮时，这是某种事件

因此，基本上有两种方法来解决这个问题：

该条件位于action creator内部，并使用

thunk中间件

const cancelEdit = () => (dispatch, getState) => {
  if (!getState().isSaving) {
    dispatch({type: CANCEL_EDIT});
  }
}

条件是在减速器内部，不需要中间件

function reducer(appState, action) {
  switch(action.type) {
   case: CANCEL_EDIT:
     if (!appState.isSaving) {
       return {...appState, editingRecord: null }
     } else {
       return appState;
     }
   default:
     return appState;

  }
}

我非常喜欢将UI交互视为事件而不是命令，这有两个优点：

所有域逻辑都保留在同步纯还原器中，非常容易测试。想象一下，您需要为功能编写单元测试

const state = {
  isSaving: true,
  editingRecord: 'FOO'
};

// State is not changed because Saving is in progress
assert.deepEqual(
  reducer(state, {type: 'CANCEL_EDIT'}),
  state
);

// State has been changed because Saving is not in progress anymore
assert.deepEqual(
  reducer({...state, isSaving: false}),
  {isSaving: false, editingRecord: null}
);

正如您所看到的，当您将交互视为事件时，测试实际上非常简单

如果您决定不忽略该操作，而是显示一些不可能执行该操作的视觉指示，该怎么办？您需要发送另一个操作或基本上重建它。但是，您不能在此处将热重新加载与replay一起使用，因为logic in action creator不可重新播放。但是，如果逻辑在reducer中，您可以简单地更改行为，reducer将被热重新加载，所有事件都将被重放。您发送的唯一事件是用户单击了某个按钮，您不能否认这一事实。因此，除非您彻底更改UI，否则您始终可以使用replay进行热重新加载

---

当您将与UI的任何交互视为事件时，您将获得最佳的重播体验，因为不能否认事件刚刚发生。

关于热重新加载方面，如果您重播还原程序接收到的操作，则无论哪种方式，您都应以相同的状态结束，如果在creator中触发了其他动作，那么重放这些动作仍然会导致相同的状态，假设reducer为pure，这是真的，但正如我在上面的示例中解释的那样。在第一种方法中（使用thunk中间件），操作甚至没有被调度，因此信息丢失，信息是用户单击按钮的信息。这是一个微不足道的例子，但在现实世界中，您可能会在action creators中使用非常繁重的逻辑，这会导致许多操作（事件），但生成操作的逻辑无论如何都不可重放。但是，不能否认已经进行了一些UI交互（单击按钮）。要忽略redux中的操作，请查看。这是达姆·阿布拉莫夫本人推荐的。