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

Question

我开始学习钩子(Hook)。但我不明白如何正确使用异步调用。
早些时候我使用

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));

Answer 1

useDispatch() Hook 将返回对 dispatch 的引用函数，你不向它传递一个 Action ，你得到 dispatch引用并传递给它(dispatch) Action 。

所以基本上它应该看起来像这样:

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

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