Можно ли разделить представление и логику для компонента в Redux / React?

Как показано в официальных документах redux -> https://redux.js.org/basics/usage-with-react, логика и предварительные настройки должны быть связаны вместе.

Вопрос в том, реально ли, что мы не можем разделить их, чтобы сделать наш код более понятным?

Например, какой-то компонент из официальных документов redux.js.org. Итак, логика и пресеты в нем вместе, и это выглядит не так хорошо и ясно:

import React from 'react'
import { connect } from 'react-redux'
import { addTodo } from '../actions'
 
let AddTodo = ({ dispatch }) => {
  let input
 
  return (
    <div>
      <form
        onSubmit = {e => {
          e.preventDefault()
          if (!input.value.trim()) {
            return
          }
          dispatch(addTodo(input.value))
          input.value = ''
        }}
      >
        <input
          ref = {node => {
            input = node
          }}
        />
        <button type = "submit">
          Add Todo
        </button>
      </form>
    </div>
  )
}
AddTodo = connect()(AddTodo)
 
export default AddTodo

P.S. Еще видел такой вопрос: Разделение презентационной и логической составляющих react / redux, это не то же самое.

UPD: I had separate the logic into onSubmit module and component presentation. But > for now I get an error - TypeError: Cannot call a class as a function :

/ * ПРЕЗЕНТАЦИЯ * /

import React from 'react';
import { connect } from 'react-redux';
import AddTodo from '../../Actions/AddTodo'
import addTodo from '../../Modules/handleClick'

class AddTodos extends React.Component{    
    componentDidMount() {
        console.info(addTodo()); // for test. Get "TypeError: Cannot call a class as a function"
    }

    render() {
        return (
            <form>
                <input type = "text" placeholder = "Your text" />
                <button type = "submit">Add todos</button>
            </form>
        );  
    }
}

export default AddTodos;

/ * ОТПРАВИТЬ МОДУЛЬ * /

import { connect } from 'react-redux';
import AddTodo from '../Actions/AddTodo'

let addTodo = ({ dispatch }) => {
    if (document.readyState === 'complete') {
        let form = document.querySelector('form');
        form.addEventListener('submit', handleClick);

        function handleClick(e) {
            e.preventDefault();

            let input = document.querySelector('input');    
            dispatch(AddTodo(input.value));

            input.value = '';
        }
    }
}

addTodo = connect()(addTodo);

export default addTodo;