Проблема в React с использованием Redux, действий и рассылки - PullRequest
Новая
       20

Проблема в React с использованием Redux, действий и рассылки

0 голосов
/ 25 апреля 2019

У меня есть форма входа в систему, которая должна перенаправить пользователя на целевую страницу, если в базе данных существует электронная почта пользователя.

У меня есть класс с именем "FormToLogin" с методом, называемым login. В методе login я отправляю данные и this.props.history в действие с именем loginAct.

Контейнер: 

class FormToLogin extends Component {
    login = fullForm => {

        const { dispatch } = this.props;
        const data = {[user]: {...fullForm}}

        return dispatch(login(data, this.props.history)) <-- apparently, passing history to an action is not good)

    }
}

Как видите, я вызываю действие, передавая данные (которые будут включать в себя адрес электронной почты, введенный пользователем) и историю, потому что я хочу сделать .push('/new_url'), если электронная почта существует в базе данных.

Действие: 

export const login = (data, history, dispatch) => {
    return api.post(url, data)

       .then(({ status, h, data }) => {
         // whatever if it returns 200
       }

       .catch(({ response }) => {
           dispatch(loginFail());

           const status = (response || {}).status;

           if (status === 401 && hasError(error_user, response.data)) {

               history.push('/new_url') // This is INCORRECT
               ?? -- what do I need here -- ??
           }
       })
}

Мне сказали, что плохая практика - передавать историю маршрутов действию. Итак, history.push() не должно происходить здесь. Мне было предложено добавить улов на уровне контейнера ("FormToLogin").

Итак, я попытался создать перехват в Container(FormToLogin), когда я вызываю Action с помощью dispatch(login(data)), но он не работает. Также var status не существует в контейнере. 

BEFORE: return dispatch(login(data, this.props.history))
AFTER: .catch(e => { 
           if (status === 401 && hasError(
               error_user, 
               e.response.data
              )) { 
               history.push('/new_url); 
              } throw e; })

Что мне нужно добавить или изменить?

1 Ответ

0 голосов
/ 25 апреля 2019

Два способа решения этой проблемы.

1) Доступ к объекту истории внутри Создателя действий без явной передачи.

// создание объекта истории

history.js

import createHistory from 'history/createHashHistory'

export default createHistory()

action.js

import history from './history'

history.push('/new_url') // use it wherever you want.

2) Если вы не хотите, чтобы это было внутри действия, тогда обрабатывайте это внутри formLogin.

При отправке dispatch(loginFail());, внутри loginFailфункция устанавливает состояние email_address.Вы можете получить это состояние, используя функцию connect внутри FormToLogin, благодаря библиотеке реаги-редукции с использованием реквизита.

Внутри функции рендеринга вы можете написать. 

if (this.props.isEmailAddress) { history.push('/new_url') }
...