如何 cancel/ignore redux 中的一个动作

Question

是否有取消或忽略操作的方法？

或者说 best/recommended 忽略操作的方法是什么？

我有以下操作创建器，当我向操作创建器输入无效大小（比如 'some_string'）时，除了收到我自己的警告消息外，我还收到： Uncaught Error: Actions must be plain objects. Use custom middleware for async actions.

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-channel 中讨论过这个问题，其中一个建议是像这样使用 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');
  }
}

另一种选择是忽略减速器内部的动作。这确实使 reducer "fatter" 因为它有更多的责任，但它使用更少的 thunk-actions 这使得它更容易调试。我可以看到 thunk 模式失控，因为我将被迫在几乎每个动作中使用它，如果你有很多批处理动作，维护起来会有点痛苦。

Answer 1

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

所以基本上有两种解决问题的方法：

条件在 action creator 中并且使用 thunk-middleware

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

条件在reducer内部，不需要中间件

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

如您所见，当您将交互视为事件时，测试真的很简单

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

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

如何 cancel/ignore redux 中的一个动作

How to cancel/ignore an action in redux

javascript

flux

redux