代码之家  ›  专栏  ›  技术社区  ›  eddiewould

如何在redux中有条件地分派/级联操作

  •  0
  • eddiewould  · 技术社区  · 6 年前

    我正在开发一个普通的js应用程序(独立的ui组件),我一直在尝试使用redux来简化一些逻辑的测试和推理。

    有一个ui事件/用户操作(我们称之为“do_something_action”),它可以在ui中以两种不同的方式触发:

    1. 通过按键
    2. 用鼠标拖动

    对于1来说,这已经足够简单了——我很高兴让ui组件确定是否在事件处理程序中按下了适当的键,并直接发送redux“do_something_action”。

    对于商业规则,我们是否应该发出“做某事”或“做某事”(或者可能什么都不做) 相当复杂 。我想能够 关于理由 测试 这个逻辑-因此我的想法是发送一个“可能做什么”的操作(从事件处理程序捕获的最少必要信息 抽象的 )

    我能/应该通过发出“也许你做什么”的重击来解决这个问题吗?还是我走错了路?

    1 回复  |  直到 6 年前
        1
  •  0
  •   eddiewould    6 年前

    当然 可能的 要通过重击实现此功能:

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