时间戳

首页 > 解决方案 > 初始化前无法访问“actionCreator”

javascript - 初始化前无法访问“actionCreator”

问题描述

之前在 redux 中使用过基于 react 类的组件，想尝试使用具有类似 redux 文件夹结构的功能组件。但是当我将一个动作创建者导入一个组件时，比如“增量”到一个组件中以使用它与 useDispatch().dispatch() 它显示“增量”没有初始化。

动作/index.js

export const increment = () => {
    return {
        type: 'increment',
    };
};

export const decrement = () => {
    return {
        type: 'decrement',
    };
};

计数器.jsx

import classes from './Counter.module.css';
import { useSelector } from 'react-redux';
import { useDispatch } from 'react-redux';
import { increment, decrement } from '../redux/actions';
const Counter = () => {
    const dispatch = useDispatch();
    const toggleCounterHandler = () => {};
    const counter = useSelector((state) => state.counter.counter);
    console.log(increment);
    const increment = () => {
        dispatch();
    };
    const decrement = () => {
        dispatch();
    };
    return (
        <main className={classes.counter}>
            <h1>Redux Counter</h1>
            <div className={classes.value}>{counter}</div>
            <div>
                <button onClick={increment}>Increment</button>
                <button onClick={decrement}>Decrement</button>
            </div>
            <button onClick={toggleCounterHandler}>Toggle Counter</button>
        </main>
    );
};

export default Counter;

在控制台记录增量功能期间，我得到：

ReferenceError：在初始化之前无法访问“增量”

标签： javascriptreactjsredux

解决方案

您需要调度操作

它可能看起来像这样，例如：

import classes from './Counter.module.css';
import { useSelector } from 'react-redux';
import { useDispatch } from 'react-redux';
import { increment, decrement } from '../redux/actions';
const Counter = () => {
    const dispatch = useDispatch();
    const toggleCounterHandler = () => {};
    const counter = useSelector((state) => state.counter.counter);
    const handleIncrement = () => 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;

最终，问题的症结在于您已经定义increment了两次，但您也没有调度该动作。

推荐阅读