React函数组件引入Redux action creator报错：初始化前无法访问

错误原因 #

• 命名冲突+暂时性死区：你从../redux/actions导入的increment、decrement和组件内部声明的事件处理函数重名，内部声明的变量会覆盖外部导入的内容。同时const声明的变量存在暂时性死区，你在内部const increment声明语句之前执行console.log(increment)，此时访问的是还未完成初始化的内部变量，直接触发报错。
• dispatch调用逻辑错误：即使解决命名问题，你当前的dispatch()没有传入action参数，也不会触发Redux状态更新。

修复后的代码 #

import classes from './Counter.module.css';
import { useSelector } from 'react-redux';
import { useDispatch } from 'react-redux';
// 保持导入的action creator不变
import { increment, decrement } from '../redux/actions';
const Counter = () => {
    const dispatch = useDispatch();
    const toggleCounterHandler = () => {};
    const counter = useSelector((state) => state.counter.counter);
    // 这里打印的就是导入的increment了
    console.log(increment);
    // 内部事件函数改名，避免命名冲突
    const handleIncrement = () => {
        // dispatch里传入action creator执行后返回的action对象
        dispatch(increment());
    };
    const handleDecrement = () => {
        dispatch(decrement());
    };
    return (
        <main className={classes.counter}>
            <h1>Redux Counter</h1>
            <div className={classes.value}>{counter}</div>
            <div>
                {/* 绑定改名后的事件函数 */}
                <button onClick={handleIncrement}>Increment</button>
                <button onClick={handleDecrement}>Decrement</button>
            </div>
            <button onClick={toggleCounterHandler}>Toggle Counter</button>
        </main>
    );
};

export default Counter;

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