添加useDispatch后，后台代码将无法运行

Question

我正在使用apisauce为我的应用程序创建应用程序接口。apisauce有一个名为addMonitor的函数，这里是：https://github.com/infinitered/apisauce#adding-monitors。

但是当我将useDispatch添加到naviMonitor中时，后台的代码无法运行。具体地说，我不能记录response。贝罗是我的Api.js

import apisauce from 'apisauce';
import {useDispatch} from 'react-redux';

const create = () => {
    ...

    const naviMonitor = (response) => {
        const dispatch = useDispatch();
        const {status} = response || {};

        if ( (status && status === 200) ) {
            console.log(response);
        } else {
            // TODO
        }
    };

    api.addMonitor(naviMonitor);
}

我哪里错了？

谢谢你的帮助。

Answer 1

尝试将响应对象从API返回到组件函数，并在那里使用调度方法，因为我们不允许在组件外部使用useDispatch钩子或任何react钩子。

像这样：

import apisauce from 'apisauce';
import {useDispatch} from 'react-redux';

const create = () => {
    ...

    const naviMonitor = (response) => {
        
        const {status} = response || {};

        if ( (status && status === 200) ) {
            console.log(response);
            return response; // process response if required.
        } else {
            // TODO
            return response; // process response if required.            
        }
    };

    api.addMonitor(naviMonitor);
}

在component屏幕中：

import {useDispatch} from 'react-redux';

const MyComponent = props => {
    const dispatch = useDispatch();

    const actionHandler = async () => {
        const response = await create();
        dispatch(response);  // dispatch your actions here..
    }
}