Как подписаться на действие Redux в компоненте React

Я пытаюсь понять, как я могу подписаться на действие Redux в компоненте React. Я ничего не нашел в Google, поэтому я открываю здесь вопрос, чтобы узнать, может ли кто-нибудь мне помочь.

Когда пользователь пытается войти в систему, я отправляю loginRequestAction(), затем обрабатываю его с помощью redux-saga (проверьте мой файл saga.js ниже), наконец, если все в порядке, я отправляю действие LOGIN_REQUEST_SUCCESS.

То, что я хотел бы сделать здесь, найти способ подписаться на действие LOGIN_REQUEST_SUCCESS в моем компоненте React, чтобы после получения действия я мог обновить локальное состояние моего компонента React и использовать history.push() для перенаправления пользователя на страницу панели инструментов.

Это код моего компонента:

/**
 *
 * LoginPage
 *
 */

import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Helmet } from 'react-helmet';
import { createStructuredSelector } from 'reselect';
import { compose } from 'redux';
import { Container, Row, Col, Button, Alert } from 'reactstrap';
import injectSaga from 'utils/injectSaga';
import injectReducer from 'utils/injectReducer';
import { Link } from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSpinner } from '@fortawesome/free-solid-svg-icons';
import { Formik, Form, Field } from 'formik';
import * as Yup from 'yup';
import { ReactstrapInput } from 'reactstrap-formik';
import reducer from './reducer';
import saga from './saga';
import { loginRequestAction } from './actions';
import { makeSelectLoginPage } from './selectors';
import { makeSelectIsLogged } from '../Auth/selectors';

const LoginSchema = Yup.object().shape({
  userIdentifier: Yup.string().required('Required'),
  password: Yup.string().required('Required'),
});

/* eslint-disable react/prefer-stateless-function */
export class LoginPage extends React.PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      formMsg: {
        color: '',
        text: '',
      },
    };
  }

  componentDidMount() {
    const { history, isLogged } = this.props;

    if (isLogged) history.push('/dashboard/index');
  }

  render() {
    const { formMsg } = this.state;
    const { onLoginFormSubmit } = this.props;

    return (
      <div>
        <Helmet>
          <title>Sign in</title>
          <meta name = "description" content = "Description of LoginPage" />
        </Helmet>
        <Container className = "auth-container">
          <div className = "form-page">
            <Row>
              <Col className = "text-center">
                <img
                  className = "mb-4"
                  src = "https://getbootstrap.com/docs/4.1/assets/brand/bootstrap-solid.svg"
                  alt = ""
                  width = "72"
                  height = "72"
                />
              </Col>
            </Row>
            <Row>
              <Col className = "text-center">
                {' '}
                <h1 className = "h3 mb-3 font-weight-normal">Authentication</h1>
                <Alert
                  color = {formMsg.color}
                  role = "alert"
                  className = {formMsg.text ? '' : 'd-none'}
                >
                  <strong>{formMsg.text}</strong>
                </Alert>
              </Col>
            </Row>

            <Formik
              initialValues = {{
                userIdentifier: '',
                password: '',
              }}
              validationSchema = {LoginSchema}
              onSubmit = {onLoginFormSubmit}
            >
              {({ isSubmitting }) => (
                <Form>
                  <Field
                    component = {ReactstrapInput}
                    name = "userIdentifier"
                    type = "userIdentifier"
                    placeholder = "[email protected]"
                    label = "E-mail address"
                  />
                  <Field
                    component = {ReactstrapInput}
                    name = "password"
                    type = "password"
                    placeholder = "Password"
                    label = "Password"
                  />
                  <div>
                    <Button
                      type = "submit"
                      block
                      size = "lg"
                      color = "primary"
                      disabled = {isSubmitting}
                    >
                      <FontAwesomeIcon
                        pulse
                        icon = {faSpinner}
                        className = {isSubmitting ? 'mr-2' : 'd-none'}
                      />
                      Log in to access
                    </Button>
                  </div>
                </Form>
              )}
            </Formik>

            <Link to = "/auth/reset">
              <Button size = "sm" color = "secondary" block className = "mt-2">
                Forgot password?
              </Button>
            </Link>
            <p className = "mt-5 mb-3 text-center">
              <Link to = "/auth/register">
                Don&#39;t have an account? Sign up
              </Link>
            </p>
          </div>
        </Container>
      </div>
    );
  }
}

LoginPage.propTypes = {
  isLogged: PropTypes.bool,
  history: PropTypes.object,
  onLoginFormSubmit: PropTypes.func,
};

const mapStateToProps = createStructuredSelector({
  loginpage: makeSelectLoginPage(),
  isLogged: makeSelectIsLogged(),
});

function mapDispatchToProps(dispatch) {
  return {
    onLoginFormSubmit: values => dispatch(loginRequestAction(values)),
  };
}

const withConnect = connect(
  mapStateToProps,
  mapDispatchToProps,
);

const withReducer = injectReducer({ key: 'loginPage', reducer });
const withSaga = injectSaga({ key: 'loginPage', saga });

export default compose(
  withReducer,
  withSaga,
  withConnect,
)(LoginPage);

Это мой файл saga.js:

import { put, call, takeLatest } from 'redux-saga/effects';
import {
  LOGIN_REQUEST,
  LOGIN_REQUEST_SUCCESS,
  LOGIN_REQUEST_FAILED,
} from './constants';
import { AuthApi } from '../../api/auth.api';

export function* loginRequest(action) {
  const { userIdentifier, password } = action.values;

  try {
    const tokens = yield call(AuthApi.login, userIdentifier, password);
    yield put({ type: LOGIN_REQUEST_SUCCESS, tokens });
  } catch (err) {
    let errMsg;

    switch (err.status) {
      case 403:
        errMsg = 'Invalid credentials';
        break;
      case 423:
        errMsg = 'Account desactivated';
        break;
      default:
        errMsg = `An server error ocurred. We have been notified about this error, our devs will fix it shortly.`;
        break;
    }

    yield put({ type: LOGIN_REQUEST_FAILED, errMsg });
  }
}

export default function* defaultSaga() {
  yield takeLatest(LOGIN_REQUEST, loginRequest);
}

P.S. Я исхожу из этой проблемы GitHub: https://github.com/react-boilerplate/react-boilerplate/issues/2360 (пожалуйста, взгляните на это, так как есть возможное решение, но IMHO, я думаю, что это неправильный путь).