javascript - Redux 中 Action 创建者的触发方式不同，如何处理？

Question

这是我的代码:

const onHandleAction = (e, action) => {
        // props.resetPage()
        switch (action) {
            case 'set':
                onChangeSet(e)
                break;
            case 'class':
                onChangeClass(e)
                break;
            case 'manaCost':
                onChangeManaCost(e)
                break;
            case 'search':
                onHandleSearch()
                break;
        }
    }

    const onChangeSet = e => {
        props.resetPage()
        if (e.target.value === 'Arena') {
            props.setGameMode(e.target.value);
        } else {
            props.setActualSet(e.target.value);
        }
    };

    const onChangeClass = e => {
        props.resetPage()
        const classValue =
            e.target.value === 'All Classes' ? 'all' : e.target.value;
        props.setClass(classValue);
    };

    const onChangeManaCost = e => { 
        props.resetPage()
        if (props.manaCost.every(m => m !== e.target.value)) {
            props.setManaCost(e.target.value)
        } else {
            props.removeManaCost(e.target.value)
        }
    };

您可能会注意到这条线

props.resetPage()

重复3次。我试图将它放在我的 onHandleAction 中，这样它就会在任何这些操作之前启动，但它不起作用。如果我保留代码，一切都会正常。如何减少这行代码不重复太多次？

Answer 1

在onHandleAction内调用props.resetPage();应该可以工作。另一种选择是创建一个包装函数，该函数将调用 reset prop 并将该操作与其他参数一起作为回调。此方法的另一个好处是您可以选择要重置页面的操作:

const actionWithReset = (action, ...args) => {
  props.resetPage();
  action(args);
}


const onHandleAction = (e, action) => {
  switch (action) {
    case 'set':
      actionWithReset(onChangeSet, e)
      break;
    case 'class':
      actionWithReset(onChangeClass, e)
      break;
    case 'manaCost':
      actionWithReset(onChangeManaCost, e)
      break;
    case 'search':
      onHandleSearch()
      break;
  }
}