Question

我正在使用vanilla-js应用程序（自包含UI组件），并且我一直在尝试使用Redux使一些逻辑更容易测试和推理。

有一个UI事件/用户操作（让我们称之为＆＃34; DO_SOMETHING_ACTION＆＃34;）可以在UI中以几种不同的方式触发：

通过按键
用鼠标拖动

对于＃1来说这很简单 - 我很高兴让UI组件确定在事件处理程序中是否按下了相应的键并调度了Redux＆＃34; DO_SOMETHING_ACTION＆＃34;直接

对于＃2，业务规则是关于我们是否应该发送＆＃34; DO_SOMETHING_ACTION＆＃34;或＆＃34; DO_SOMETHING_ELSE＆＃34; （或者根本没有）非常复杂。我希望能够推理和测试这个逻辑 - 因此我的想法是发送一个＆＃34; MAYBE_DO_SOMETHING＆＃34;动作（从事件处理程序捕获的最小必要信息和抽象）。

我是否应该通过发送＆＃34; MAYBE_DO_SOMETHING＆＃34;来解决这个问题。一个thunk？或者我是以错误的方式解决这个问题？

Answer 1

使用thunk实现这一点肯定是可能的：

export const dragOverAction = function(payload: DragOverActionPayload) {
  return function(dispatch: Dispatch, getState: () => GlobalStateTree) {
      // Various business logic
      if (someCondition) {
        return;
      }

      if (anotherCondition) {
        dispatch(doSomething({
          <snip>
        }));
      } else if (anotherCondition) {
        dispatch(doSomethingElse({
          <snip>       
        }));
      }

      // Otherwise, don't dispatch anything.
  }
}

测试没有我预期的那么糟糕：

import configureMockStore from "redux-mock-store";
import thunk from "redux-thunk";

export const mockStore = configureMockStore([thunk]); 
import * as allActions from "../app/actions/index";

describe("dragOverAction", function() {
    it("should <blah blah>", async function() {
        let store = mockStore();
        await store.dispatch<any>(allActions.dragOverAction({
            foo: bar,
            <snip>
        }));
        const actions = store.getActions();

        expect(actions).toBe(<snip>);
    });
});

如何有条件地发送/＆＃34;级联＆＃34; Redux中的操作

1 个答案: