node.js - Redux 显示来自 Nodejs 后端的错误消息

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

你的 action/reducer 代码看起来不错，我认为这可能与 Prop 名称和 native 警报功能有冲突。
您是否尝试过更改 Prop 名称？就像是:

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

和

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