React Redux开发编译报错'dispatch'未定义的问题如何解决？

错误原因 #

你已经从react-redux导入了useDispatch钩子，但没有在组件内调用该钩子生成可用的dispatch实例，直接使用未声明的dispatch变量触发了编译报错。

解决方案 #

在App组件内部顶部调用useDispatch()，拿到dispatch方法即可，修改后的完整代码如下：

import React from "react";
import {useSelector,useDispatch} from 'react-redux';
import {increment} from './actions'

function App() {
  const dispatch = useDispatch(); // 新增此行代码
  const counter = useSelector(state => state.counter);
  const isLogged = useSelector(state => state.isLogged);

  return (
    <div>
      <h1>Counter {counter}</h1>
      <button onClick={()=> dispatch(increment())}>+</button>
      <button>-</button>
      {isLogged ? <h3>Value info can't be display</h3>: '' }
      
    </div>
  );
}

export default App;

补充说明：useDispatch是钩子函数，必须执行后才能返回可以触发Redux action的dispatch方法，不能直接把导入的useDispatch当作dispatch方法使用。

内容的提问来源于stack exchange，提问作者surrealduck