Как узнать, вызвана ли функция внутри избыточной диспетчерской отправки?

Question

Я пишу функцию для отправки запросов API. Когда я получаю ответ от этого API, я хочу отправить избыточное действие, если пользователь вызвал мою функцию в диспетчере или просто ничего не делает, если нет. Я использую Redux Thunk.

Прямо сейчас я написал два отдельных метода для этого.

1. Это не отправляет после получения ответа от API, просто вернуть обещание.

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

Эта функция будет вызываться как обычные функции.

---

2. Отправляет действие что-то после получения ответа от 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())

---

Теперь я хочу узнать в единственной функции, была ли она вызвана внутри диспетчеризации или просто вызвана нормально.

пример:

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