如何取消/忽略redux中的操作

Question

有没有办法取消行动或忽略它？

或者更确切地说,忽略行动的最佳/推荐方法是什么？

我有以下动作创建者,当我向动作创建者输入无效大小(比如说'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');
  }
};

我redux在Discord(reactiflux)中的-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中的动作.这确实使reducer"更胖",因为它有更多的职责,但它使用更少的thunk-actions,这使得调试更容易.我可以看到thunk-pattern失控,因为几乎每一个动作我都会被迫使用它,如果你有很多这些动作,那么批量操作会有点难以维持.

Answer 1

忽略Action Creators中的操作基本上是将它们视为命令处理程序,而不是事件创建程序.当用户点击按钮时,它是某种事件.

所以基本上有两种方法可以解决这个问题:

1. 条件是在动作创建者内部thunk-middleware并被使用

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

2. 条件在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交互视为事件而不是命令,并且有两个优点:

1. 您的所有域逻辑都保留在同步纯缩减器中,这非常容易测试.想象一下,您需要为功能编写单元测试.

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

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

2. 如果您决定不是忽略该动作,而是愿意显示某些动作不可行的视觉指示,该怎么办？您需要发送另一个操作或基本上重建它.但是,您不能在此处使用热重载和重放,因为动作创建器中的逻辑不可重新播放.如果逻辑是在reducer中,你可以简单地改变行为,reducer将被热重载并且所有事件都被重放.您发送的唯一事件是用户单击某个按钮,您不能否认这一事实.因此,除非您彻底更改UI,否则您始终可以通过重播进行热重新加载.

当您考虑与UI作为事件的任何交互时,您将获得最佳的重播体验,因为事件不能被拒绝他们刚刚发生.