Условный рендеринг при использовании Redux (чистый компонент и не чистый компонент)?

Question

const LoginPage = ({ auth, doLogin, doLogout }) => (


    <div>
      <NavBar auth={auth}/>
        <div className="row">
            <div style={{display: 'flex', justifyContent: 'center'}} className="col-md-4 col-md-offset-4">
                <LoginForm auth={auth} doLogin={doLogin} doLogout={doLogout}/>
            </div>
        </div>
      </div>

);

// Connects state to the props of this component
const mapStateToProps = state => ({
  auth: state.auth,
});

// Return a NEW component that is connected to the Store
export default connect(mapStateToProps, { doLogin, doLogout })(LoginPage);

Выше приведен код компонента, называемый LoginPage. Он переходит в глобальное состояние auth и два действия doLogin и doLogout. LoginForm обрабатывает аутентификацию пользователя, но я хочу поместить другой компонент с именем Dashboad и сделать его условно в зависимости от состояния auth.

Однако я не уверен, как сделать условный рендеринг в чистом компоненте.

Я мог бы превратиться в не чистый компонент, но тогда я не уверен, как передать auth, doLogin и doLogout в не чистый компонент.

Пожалуйста, помогите.

Answer 1

Вы можете делать почти все, что вы делали в не чистом компоненте, в чистом компоненте, за исключением того, что PureComponent автоматически выполняет shouldComponentUpdate, реагируя на себя, чтобы избежать ненужных повторных визуализаций, основанных на незначительном изменении состояния и реквизита.

Если вы хотите условно отобразить панель мониторинга, вы можете проверить состояние авторизации с помощью redux и использовать this.props.history.push("/dashboard") или <Redirect to="/dashboard"> для перехода к компоненту панели мониторинга