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

Question

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

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

在调用 my 之后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()钩子将一个参考返回dispatch功能，你不传递给它一个动作，你得到的dispatch参考，并传递给它（dispatch）的作用。

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

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

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