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

Posted 2023-02-19

【中文标题】如何使用 thunk 在 react-redux 挂钩中进行异步调用？

【英文标题】：how to make async call in react-redux hooks with thunk?

【发布时间】：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));

【参考方案1】：

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

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

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

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

【讨论】：

我认为 OP 的意思是寻求一种将钩子绑定到 redux-thunk 动作创建者的方法，而不是直接进行调度。

@CarlosJimenezBermudez 谢谢。尽管 OP 以错误的方式使用了 API，但我只是向他/她展示了该 API 的使用方式。此外，OP 接受了答案，所以我想我确实理解 OP 的意思？