Каковы лучшие практики для перенаправления пользователей в приложениях React?

Question

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

export const someAction = (values, history) => async dispatch => {
    const res = await someAsyncOperation(props);
    history.push('/home');
    dispatch(someAction);
}

В этом примере history объект (форма реакции-маршрутизатор) передается в компонент реакции. Для меня такой подход не приемлем. Также есть специальный Redirect от реагирующего роутера.

После этого я уже просмотрел много статей и не мог ничего найти. Итак, что, по вашему мнению, является лучшей практикой для перенаправления и где обрабатывать такие процессы?

Answer 1

В React вы обычно достигаете перенаправлений в componentDidUpdate ваших компонентов.

В случае асинхронных действий вы будете проверять флаг, хранящийся в хранилище Redux, как правило, логический, такой как isFetching, isCreating, isUpdating и т. Д., Который будет изменен действиями.

Простой пример:

class EditUser extends Component {
  compondentDidUpdate(prevProps) {
    if (prevProps.isUpdating && !this.props.isUpdating) {
      // ↑ this means that the async call is done.

      history.push('/users')
    }
  }

  updateUser() {
    const modifiedUser = // ...

    this.props.updateUser(modifiedUser)
    // ↑ will change state.users.isUpdating from false to true during the async call,
    // then from true to false once the async call is done.
  }

  render() { 
    // ...
    <button onClick={this.updateUser}>Update</button>
    // ...
  }
}

const mapStateToProps = (state, props) => ({
  userToEdit: state.users.items.find(user => user.id === props.userId)
  isUpdating: state.users.isUpdating,
})

const mapActionsToProps = {
  updateUser: usersActions.updateUser,
}

export default connect(mapStateToProps, mapActionsToProps)(EditUser)

Следующим шагом обычно является добавление еще одного флага в ваше хранилище Redux, чтобы отслеживать успешность асинхронных вызовов или нет (например, state.users.APIError, в котором вы можете сохранить ошибку, возвращаемую API). Тогда вы достигнете перенаправления только при отсутствии ошибок.

Answer 2

Мы в основном перенаправляем пользователя из-за того, когда пользователь вошел в систему или когда вышел. Например, вот основной компонент requireAuth HOC, чтобы проверить, вошел ли пользователь в систему или нет, и перенаправить его в другое место.

import React, { Component } from 'react';
import { connect } from 'react-redux';

export default ChildComponent => {
  class ComposedComponent extends Component {

    componentDidMount() {
      this.shouldNavigateAway();
    }

    componentDidUpdate() {
      this.shouldNavigateAway();
    }
    shouldNavigateAway() {
      if (!this.props.auth) {
        this.props.history.push('/');
      }
    }
    render() {
      return <ChildComponent {...this.props} />;
    }
  }
  function mapStateToProps(state) {
    return { auth: state.auth.authenticated };
  }
  return connect(mapStateToProps)(ComposedComponent);
};

Есть две позиции, чтобы проверить, вошел ли пользователь в систему

1. При первом монтировании компонента - в componentDidMount ()
2. Когда пользователь пытается войти в систему, войти или выйти - componentDidUpdate ()

Также в вашем примере кода history.push находится в создателе действий. Действие создателей относится к излишней стороне. Держите излишки и реагируйте отдельно.