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

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" is called in function "toggleLoading" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks

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

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

我收到以下错误：

React Hook "useDispatch" is called conditionally. React Hooks must be called in the exact same order in every component render react-hooks/rules-of-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>
}

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

React with Context, reduce dispatch boilerplate

reactjs

react-context

react-hooks