Redux-thunk dispatch 不是函数错误答案

【问题标题】：Redux-thunk dispatch is not a function errorRedux-thunk dispatch 不是函数错误
【发布时间】：2021-04-26 01:21:56
【问题描述】：

我试图从我的组件中调用一个动作。但是，当我从我的组件运行调用以下操作时我收到一个类型错误，告诉我调度不是一个函数。如何摆脱这个错误。

行动：

import { FETCH_ALL, FETCH_CUSTOMER, CREATE_CUSTOMER, DELETE_ALL, DELETE_CUSTOMER, UPDATE_CUSTOMER } from '../actionTypes';
import * as api from '../api/index';

export const getCustomers = () => async (dispatch) => {
    try {
        const { data } = await api.getCustomers();

        console.log(dispatch);
        dispatch({ type: FETCH_ALL, payload: data});
    } catch(err) {
        console.log(err);
    }
};

组件：

function Home() {

    const customers = useSelector((state) => state.customers);
    const dispatch = useDispatch();
    
    useEffect(() => {
        dispatch(getCustomers);
    },[dispatch]);


    return (
        <div style={{paddingLeft: '50px', paddingRight: '50px'}}>
            <header>
                <h1 style={{textAlign: 'center', color: 'green'}}>Customer Relationship Management</h1>
            </header>
            <button onClick={dispatch(getCustomers)}>Fetch Customers</button>
            <div className="heading"> 
                <h3>Customer Details: </h3>
                <button className="homePageButtons"><Link className="homePageLinks" to="/add-customer">Add Customer</Link></button>
            </div>
            <div className="customerTable">
                <table>
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th className="name">First Name</th>
                            <th className="name">Last Name</th>
                            <th className="email">Email</th>
                        </tr>
                    </thead>
                    <tbody>
                        {customers.map((customer) => (
                            <tr>
                                <td>customer.id</td>
                                <td>customer.firstName</td>
                                <td>customer.lastName</td>
                                <td>customer.email</td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>
        </div>
    );
}

出现以下错误：

customer.js:11 TypeError: dispatch is not a function
    at customer.js:9

我记录了调度，它显示了下面的对象...

SyntheticBaseEvent {_reactName: "onClick", _targetInst: null, type: "click", nativeEvent: MouseEvent, target: button, …}

我在下面的 index.js 文件广告中应用了中间件...

const store = createStore(reducers, compose(applyMiddleware(thunk)));

【问题讨论】：

你试过store.dispatch(getCustomers); 吗？
@b3hr4d 不，它的 getCustomers 是一个 thunk 动作创建者，所以 OP 没有理由这样做。

标签： reactjs redux redux-thunk

【解决方案1】：

在 useEffect 中做 dispatch(getCustomers()); 在点击处理程序中做 onClick={()=>dispatch(getCustomers())}

【讨论】：

点击处理程序不应该也调用getCustomers吗？ {()=>dispatch(getCustomers())}?