Очередь уведомлений (Notify) в react, redux

Question

Нужно как то организовать очередь уведомлений которые dispatch если например не может загрузить данные с внешнего API (новости Яндекса, курсы валют с ЦБ).

Сейчас есть 2 action (новости и курсы валют):

export const getNewsAction = () => {
  return (dispatch) => {
    dispatch(getNewsRequest());
    axios
      .get(process.env.REACT_APP_NEWS_URL)
      .then((response) => {
        if (response.status === 200) {
          const news = fastParser.parse(response.data);
          dispatch(
            getNewsResponse(
              sortArray(news.rss.channel.item.slice(0, 11), "pubDate", {
                reverse: true,
              })
            )
          );
        }
      })
      .catch((error) => {
        dispatch(getNewsError(error));
        dispatch(
          showNotify(
            "Не удалось загрузить новости, попробуйте перезагрузить страницу",
            "error"
          )
        );
        setTimeout(() => {
          dispatch(hideNotify());
        }, 4000);
      });
  };
};

и

export const getCurrencyAction = () => {
  return (dispatch) => {
    dispatch(getCurrencyRequest());
    axios
      .get(process.env.REACT_APP_CURRENCY_URL)
      .then((response) => {
        if (response.status === 200) {
          const currency = Object.values(response.data.Valute).filter(
            (item) => item.CharCode === "USD" || item.CharCode === "EUR"
          );
          dispatch(getCurrencyResponse(currency));
        }
      })
      .catch((error) => {
        dispatch(getCurrencyError(error));
        dispatch(
          showNotify(
            "Не удалось загрузить курсы валют, попробуйте перезагрузить страницу",
            "error"
          )
        );
        setTimeout(() => {
          dispatch(hideNotify());
        }, 4000);
      });
  };
};

Если ресурс не доступен один то всё вроде как бы нормально. Выводит сообщение при ошибке. Но если и второй не доступен ресурс то выводит только Notify тот у которого ошибка обрабатывается первая. А хочется что бы они или одновременно приходили (второй под первым) ну или по очереди...

Answer 1

Так и сделал передал массив в store, в коде так:

Reducer:

const initialState = {
  notify: [],
};

export default function (state = initialState, action) {
  switch (action.type) {
    case SHOW_NOTIFY:
      return {
        ...state,
        notify: [
          ...state.notify,
          { message: action.message, messageType: action.messageType },
        ],
      };
    case HIDE_NOTIFY:
      return {
        ...state,
        notify: [],
      };
    default:
      return state;
  }
}

Action:

export const showNotifyAction = (message, messageType) => {
  return {
    type: SHOW_NOTIFY,
    message,
    messageType,
  };
};

export const hideNotifyAction = () => {
  return {
    type: HIDE_NOTIFY,
  };
};

Ну и пример использования:

const handleSubmit = (event) => {
    const { email, password } = user;
    event.preventDefault();

    firebase
      .login({
        email,
        password,
      })
      .catch(() => showNotify("Неправильный e-mail или пароль", "error"));
    setTimeout(() => {
      hideNotify();
    }, 3000);
  };

БЛОГ НА HUSL

Очередь уведомлений (Notify) в react, redux

Ответы (1 шт):