Reactjs Redux登录/注册警报

Posted 2021-05-05

我正在寻找一个简单的登录/注册系统，并偶然发现了这个教程：

http://jasonwatmore.com/post/2017/09/16/react-redux-user-registration-and-login-tutorial-example

我尝试了它并添加了一个真正的mongoDB后端来删除Mock-Backend。这是我第一次做Redux，但经过一番努力，现在一切都在努力！你可以在这里看到结果：

https://genko.de/login

只有一件事根本不起作用，我不知道如何解决它。由于我想避免引导，我的错误处理有一个大问题。

我想在下面的案例中显示Material-Ui的小吃吧：

• 用户名或密码无效
• 已成功登录
• 用户名已被采用（注册）

实际上我的redux文件中已经有一些操作和缩减器，但说实话，我只是从教程中复制它们，我不知道如何使用它们。

以下功能由“登录”按钮触发：

  handleSubmit(e) {
    e.preventDefault();

    this.setState({ submitted: true });
    const { username, password } = this.state;
    const { dispatch } = this.props;
    if (username && password) {
        dispatch(userActions.login(username, password))
      }
}

这是我的登录功能（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.actions：

import { alertConstants } from '../_constants';
export const alertActions = {
    success,
    error,
    clear
};

function success(message) {
    return { type: alertConstants.SUCCESS, message };
}

function error(message) {
    return { type: alert, message };
}

function clear() {
    return { type: alertConstants.CLEAR };
}

最后我的alert.constants：

export const alertConstants = {
SUCCESS: 'ALERT_SUCCESS',
ERROR: 'ALERT_ERROR',
CLEAR: 'ALERT_CLEAR'
};

你对我有什么提示或建议吗？

最好的祝福 ：）

编辑：

我忘了向你展示我的NodeJS全局错误处理程序中间件，从这个后续教程中替换face-backend：

    module.exports = errorHandler;

function errorHandler(err, req, res, next) {
    if (typeof (err) === 'string') {
        // custom application error
        return res.status(400).json({ message: err });
    }

    if (err.name === 'ValidationError') {
        // mongoose validation error
        return res.status(400).json({ message: err.message });
    }

    if (err.name === 'UnauthorizedError') {
        // jwt authentication error
        return res.status(401).json({ message: 'Invalid Token' });
    }

    // default to 500 server error
    return res.status(500).json({ message: err.message });
    }

答案

你需要在你的reducer中为LOGIN_SUCCESS和LOGIN_FAILURE添加一个条目，它会将redux存储中的状态设置为你可以在组件中使用的东西。

function reducer(state = { status: ''}, action) {
  switch (action.type) {
    case 'LOGIN_SUCCESS':
      return { status: 'LOGGED_IN'}
    ... ETC  
    default:
      return state
  }
}

然后通过mapStateToProps，你将redux商店的状态映射到组件的道具，并能够使用它像 -

const mapStateToProps = (state) => ({
   status: state.status
})

this.props.status // LOGGED_IN