与上下文反应，减少调度样板

Question

我一直在寻找一种在使用 React 上下文时减少样板的方法。通常，在调度操作时，我会这样做：

    applicationDispatch({
      type: applicationActionTypes.setIsLoading,
      payload: !isLoading,
    });

所以我尝试了这个（在 和 组件内部）：

const useDispatch = (dispatch, method, payload) =>
  dispatch({
    type: applicationActionTypes[method],
    payload: payload,
  });

并试图这样称呼它：

function App(){
const {application, applicationDispatch} = React.useContext(ApplicationStore)
const {isLoading} = application
const toggleLoading = ()=>useDipatch(applicationDispatch, applicationActionTypes.setIsLoading, payload)
...
}

那当然没有用。我收到以下错误：

React Hook "useDispatch" 在函数 "toggleLoading" 中被调用，该函数既不是 React 函数组件也不是自定义 React Hook 函数 react-hooks/rules-of-hooks

所以我尝试在组件中调用它：

return (
<div>
   {someBool && <Modal
          onClick={useDispatch(applicationDispatch, setIsLoading, !isLoading)}>
      ...
      </Modal>}
</div>
}

我收到以下错误：

有条件地调用 React Hook "useDispatch"。在每个组件渲染 react-hooks/rules-of-hooks 中，必须以完全相同的顺序调用 React Hooks

有什么想法吗？

Answer 1

你的useDispatch 函数不是一个“钩子”，所以你不应该用“use”前缀来命名它。

对于您要实现的目标，更常用的方法是：

1- 创建一个actionCreator函数：

function runAction(method, payload) {
  return {
    type: applicationActionTypes[method],
    payload: payload,
  }
}

2- 使用您的 actionCreator 函数进行调度：

return (
<div>
   {someBool && <Modal
          onClick={()=>applicationDispatch(runAction("setIsLoading", !isLoading))}>
      ...
      </Modal>}
</div>
}