Reactjs Redux Вход / Регистрация Уведомления - PullRequest
Новая
       5

Reactjs Redux Вход / Регистрация Уведомления

0 голосов
/ 08 января 2019

Я искал простую систему входа / регистрации и наткнулся на этот урок:

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

Я попробовал это и добавил настоящий mongoDB Backend для удаления Mock-Backend. Это был мой первый раз, когда я делал Redux, но после долгой борьбы все работает отлично! Вы можете увидеть результат здесь:

https://genko.de/login

Только одна вещь не работает вообще, и я понятия не имею, как ее решить. Поскольку я хочу избежать начальной загрузки, у меня большая проблема с обработкой ошибок.

Я хочу отобразить снэк-бар из Material-Ui для следующих случаев:

  • Неверное имя пользователя или пароль
  • Успешно авторизован
  • Имя пользователя уже занято (регистрация)

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

Следующая кнопка запускается кнопкой входа в систему: 

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

И, наконец, мои оповещения. Константы: 

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

У вас есть намеки на меня или предложения?

С наилучшими пожеланиями:)

EDIT:

Я забыл показать вам свое промежуточное программное обеспечение NodeJS Global Error Handler из этого учебного руководства для замены торцевого бэкэнда: 

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

1 Ответ

0 голосов
/ 08 января 2019

у вас должны быть записи в вашем редукторе для LOGIN_SUCCESS и LOGIN_FAILURE, которые будут устанавливать состояние в хранилище редуксов на то, что вы можете использовать обратно в своем компоненте. 

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

Затем через mapStateToProps вы отобразите состояние хранилища приставок на реквизиты компонента и сможете использовать его как - 

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

this.props.status // LOGGED_IN

...