添加useDispatch后，后面的代码无法运行

Question

我正在使用 apisauce 为我的应用创建 api。而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 返回到组件函数，并在那里使用 dispatch 方法，因为我们不允许使用 useDispatch 钩子或组件外部的任何反应钩子。

喜欢：

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

在组件屏幕中：

import {useDispatch} from 'react-redux';

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

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