如何在 Redux 中有条件地调度/“级联”操作答案

【问题标题】：How to conditionally-dispatch / "cascade" actions in Redux如何在 Redux 中有条件地调度/“级联”操作
【发布时间】：2018-06-14 22:42:40
【问题描述】：

我正在开发一个 vanilla-js 应用程序（独立的 UI 组件），并且我一直在尝试使用 Redux 使一些逻辑更易于测试和推理。

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

通过按键
通过鼠标拖动

对于 #1，这很简单 - 我很高兴让 UI 组件确定是否在事件处理程序中按下了相应的键并直接调度 Redux“DO_SOMETHING_ACTION”。

对于#2，关于我们应该发送“DO_SOMETHING_ACTION”还是“DO_SOMETHING_ELSE”（或者根本不发送）的业务规则相当复杂。我希望能够推理和测试这个逻辑 - 因此我的想法是调度一个“MAYBE_DO_SOMETHING”动作（从事件处理程序捕获的最少必要信息和抽象的）。

我可以/我应该通过发送“MAYBE_DO_SOMETHING”来解决这个问题吗？还是我走错了路？

【问题讨论】：

抱歉，如果问题标题具有误导性 - 请随时将其更改为更合适的名称！
如何创建一个名为shouldIDoSomething(theCurrentState) 的函数返回一个布尔值。然后使用该函数来确定是否应该分派一个动作。然后针对该函数编写单元测试。
@sissonb 它需要返回一个动作（“DO_SOMETHING”、“DO_SOMETHING_ELSE”或 null），因为我也想测试该动作是否正确填充。但是，是的，这似乎是“可能可行的最简单的事情” - 谢谢
你可以做两个函数。一个用于 DO_SOMETHING，一个用于 DO_SOMETHING_ELSE。 shouldIDoSomething(theCurrentState)shouldIDoSomethinglse(theCurrentState)

标签： redux redux-thunk

【解决方案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>);
    });
});

【讨论】：