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

Question

Я работал с Redux за последний месяц и добился успеха по большинству фундаментальных тем (действия / редукторы, шаблон уток, маршрутизация и т. Д.).Мне также удалось создать приложение PERN, которое обрабатывает аутентификацию пользователей и доступ на основе ролей для маршрутизации.

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

пример контейнера

import React from "react";
import { connect } from "react-redux";
import Counter from "../components/Counter";
import {
  counterActions,
  counterSelectors
} from "../../state/ducks/counter";


const CounterContainer = (props) => {

    return(
      <Counter
        counter={props.counter}
        onIncrement={props.onIncrement}
        onDecrement={props.onDecrement}
        onIncrementAsync={props.onIncrementAsync}/>
    );

};

function mapStateToProps(state){
  return {
    counter: counterSelectors.getCounter(state)
  }
}
//onIncrement, onDecrement, onIncrementAsync
function mapDispatchToProps(dispatch) {
  return {
    onIncrement: () => dispatch(counterActions.incrementCounter()),
    onDecrement: () => dispatch(counterActions.decrementCounter()),
    onIncrementAsync: () => dispatch(counterActions.incrementCounterAsync())
  }
}

export default connect( mapStateToProps, mapDispatchToProps )( CounterContainer );

пример представления

import React from 'react';
import PropTypes from 'prop-types';

const Counter = ({ counter, onIncrement, onDecrement, onIncrementAsync }) =>
  <div>
    <button onClick={onIncrementAsync}>
      Increment after 1 second
    </button>
    {' '}
    <button onClick={onIncrement}>
      Increment
    </button>
    <button onClick={onDecrement}>
      Decrement
    </button>
    <hr />
    <div>
      Clicked: {counter} times
    </div>
  </div>;

Counter.propTypes = {
  counter: PropTypes.number.isRequired,
  onIncrement: PropTypes.func.isRequired,
  onDecrement: PropTypes.func.isRequired
};

export default Counter

В моем приложении для аутентификации у меня был компонент с состоянием, который обрабатывал аутентификацию посредством использования избыточного thunk для отправки loginAction с полями из компонента.Однако я использовал ловушки жизненного цикла componentDidMount() и componentWillReceiveProps().

Как лучше всего реализовать аутентификацию пользователей, следуя шаблону контейнера в Redux?Для справки, я уже переключился с redux-thunk на redux-sagas, так как я думаю, что он чувствует себя лучше при работе со слоем API.