Question

我正在编写一个发送API请求的函数。当我从该API获得响应时，如果用户在分派中调用了我的函数，我想分派redux动作，否则就什么也不做。我正在使用redux thunk。

现在我为此编写了两个单独的方法。

从API获得响应后，此事件不会分派，只是返回Promise。

const getAnimalsList = () => return axios.request({url: 'api.domain.com/animals'});

此功能将被称为常规功能。

它在收到API响应后会分派某种动作

const getAnimalsList = () => (dispatch, getState) => {
    axios.request({url: 'api.domain.com/animals'}).then(
        res => dispatch({type: 'RESPONSE RECEIVED', data: res}),
        err => dispatch({type: 'ERROR', err})
    );
}

此函数将在内部调度中称为dispatch(getAnimalsList())

现在我想在一个函数中知道它是在 dispatch 内部调用还是正常调用。

示例：

const getAnimalsLis = () => {
    let prom = axios.reques({url: 'api.domain.com/animals});
    if(function_is_called_inside_dispatch){
        return dispatch => {
            prom.then(
                res => dispatch({type: 'RESPONSE RECEIVED', data: res}),
                err => dispatch({type: 'ERROR', err})

            );
        }
    }
    else return prom;

}

Answer 1

这是错误的处理方式。无法检测到函数是像dispatch(getAnimalsList())或只是getAnimalsList()那样被调用的。由于运算符的优先级，当提供给getAnimalsList()的操作时，它已被称为dispatch。唯一的方法是将其命名为dispatch(getAnimalsList(CALLED_AS_AN_ACTION))。

正确的方法是不要混合用于不同目的的功能。可以使代码比原来更干燥，getAnimalsList函数已经包含可以以其他方式提取的通用代码：

const getAnimalsList = () => return axios.request({url: 'api.domain.com/animals'});

const getAnimalsListAction = () => (dispatch, getState) => {
    return getAnimalsList().then(
        res => dispatch({type: 'RESPONSE RECEIVED', data: res}),
        err => dispatch({type: 'ERROR', err})
    );
}

Answer 2

如果您不打算使用getState，请不要对其进行定义：

const getAnimalsList = () => (dispatch, getState) => {
    axios.request({url: 'api.domain.com/animals'}).then(
        res => dispatch({type: 'RESPONSE RECEIVED', data: res}),
        err => dispatch({type: 'ERROR', err})
    );
}

并且还使用async/await语法，它对您进行了更清晰的显示：

export const getAnimalsList = () => async dispatch => {
  const response = await jsonAnimals.get("/animals");
  dispatch({ type: "RESPONSE_RECEIVED", payload: response.data });
};

然后创建一个文件夹/文件系统，如下所示：apis/jsonAnimals.js：

在其中放置Axios代码：

import axios from 'axios';

export default axios.create({
    baseURL: 'http://api.domain.com'
});

好的，现在您有了一个不错的干净的Redux应用程序，它使外观更易于调试。

现在，如果您想在控制台中对其进行测试，则可以

export const testGetAnimalsList = () => async (dispatch, getState) => {
  await dispatch(getAnimalsList());
  console.log(getState().animals);
};

export const getAnimalsList = () => async dispatch => {
  const response = await jsonAnimals.get("/animals");
  dispatch({ type: "RESPONSE_RECEIVED", payload: response.data });
};

如何知道在redux thunk调度内部是否调用了函数？

2 个答案: