Redux отображает сообщения об ошибках от Nodejs backend

Question

Я хочу отображать сообщения об ошибках, которые я получаю от моего бэкэнда, в виде оповещения, когда мой логин терпит неудачу:

Моя кнопка входа в систему вызывает эту функцию из моего user.actions:

function login(username, password) {
    return dispatch => {
        dispatch(request({ username }));

        userService.login(username, password)
            .then(
                user => {
                    dispatch(success(user));
                    history.goBack();
                },
                error => {
                    dispatch(failure(error.toString()));
                    dispatch(alertActions.error(error.toString()));
                }
            );
    };

    function request(user) { return { type: userConstants.LOGIN_REQUEST, user } }
    function success(user) { return { type: userConstants.LOGIN_SUCCESS, user } }
    function failure(error) { return { type: userConstants.LOGIN_FAILURE, error } }
}

Мой alert.reducer выглядит следующим образом:

  import { alertConstants } from '../_constants';

export function alert(state = {}, action) {
  switch (action.type) {
    case alertConstants.SUCCESS:
      return {
        type: 'alert-success',
        message: action.message
      };
    case alertConstants.ERROR:
      return {
        type: 'alert-danger',
        message: action.message
      };
    case alertConstants.CLEAR:
      return {};
    default:
      return state
  }
}

В моем App.js я получаю это состояние с mapStateToProps:

function mapStateToProps(state) {
    const { alert } = state;
    return {
        alert
    };
}

После этого я хочу отобразить предупреждение с предупреждением:

  {alert.message &&
                          alert(alert.message)
                        }

Можете ли вы помочь мне с этим?

Answer 1

ваш код действия / редуктора выглядит нормально, возможно, это конфликт с именем реквизита и встроенной функцией оповещения. Вы пытались изменить имена реквизита? Что-то вроде:

function mapStateToProps(state) {
  const { alert } = state;
  return {
    alertState: alert
  };
}

и

{ alertState.message && alert(alertState.message) }