如何使用 thunk 在 react-redux 挂钩中进行异步调用？答案

【问题标题】：how to make async call in react-redux hooks with thunk?如何使用 thunk 在 react-redux 挂钩中进行异步调用？
【发布时间】：2020-05-16 08:31:26
【问题描述】：

我开始学习钩子。但我不明白如何正确使用异步调用。之前我用过

import * as actionQR from "../actions/qr";
...
function mapDispatchToProps(dispatch) {
    return {
        actionQR: bindActionCreators(actionQR, dispatch),
    }
}

然后打电话给我的this.props.actionQR.myFunc()，但是我应该用useDispatch（）做什么？如果我只是打电话

import {foo} from "../actions/qr";
...
useDispatch(foo());

那么我的foo() 不要console.log(2)

export const foo = () => {
    console.log(1);
    return (dispatch) => {
        console.log(2);
      }
}

我正在使用 thunk

import createRootReducer from './reducers/index';
...
const store = createStore(createRootReducer, applyMiddleware(thunk));

【问题讨论】：

标签： reactjs redux react-redux react-hooks redux-thunk

【解决方案1】：

useDispatch() 钩子将返回对dispatch 函数的引用，您不向它传递动作，而是获得dispatch 引用并将动作传递给它（dispatch）。

所以基本上它应该是这样的：

const dispatch = useDispatch()
dispatch(foo())

您可以从react-redux DOCS获取更多详细信息

【讨论】：

我认为 OP 的意思是寻求一种将钩子绑定到 redux-thunk 动作创建者的方法，而不是直接进行调度。
@CarlosJimenezBermudez 谢谢。尽管 OP 以错误的方式使用了 API，但我只是向他/她展示了该 API 的使用方式。此外，OP 接受了答案，所以我想我确实理解 OP 的意思？