如何知道是否在 redux thunk dispatch 中调用了函数？

Question

我正在编写一个函数来发送 API 请求。当我从 API 得到响应时，如果用户在调度中调用了我的函数，我想调度 redux 操作，否则什么也不做。我正在使用 redux thunk.

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

This does not dispatch after getting the response from the API, just return the Promise.

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

这个函数将像往常一样被调用。

It dispatches an action something after getting a response from the 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 内部被调用为 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() 这样调用的。由于运算符优先级，当向 dispatch 提供操作时，它已被称为 getAnimalsList()。唯一的方法是用不同的方式称呼它，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 });
};

然后像这样创建一个 folder/file 系统：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 dispatch 中调用了函数？

How to know if a function is called inside redux thunk dispatch?

reactjs

redux

redux-thunk