老师您好，又有问题想咨询老师，麻烦老师了。
学习完6-10这一章节后，我还想使用中间件。于是在6-7节的代码基础上，只修改了TodoList.js和index.js。保留了TodoListUI，并且其仍为TodoList组件的子组件。

问题：在课程6-10的总结中，老师说到关于理解connect部分【例子中的TodoList是一个UI组件，使用connect方法将UI组件与数据、业务逻辑相结合，返回一个容器组件。】但是在我的代码中，TodoList由于componentDidMount中的操作，仍是一个容器组件，而非UI组件。所以是否我的代码写法有问题？如果没有问题，该如何去理解connect方法。

我总觉得自己代码这么写好像多此一举了，但是又觉得使用中间件没有问题。

感谢老师赐教

代码如下
TodoList.js

import React, { Component } from 'react'

import TodoListUI from './TodoListUI'
import { connect } from 'react-redux';
import store from './store/index'
import { getInputChangeAction, getAddAction, deleteItem, getInitListAction } from './store/actionCreators'

class TodoList extends Component {
    render() {

        const { inputValue, list, handleButtonClick, handleInputChange, handleItemDelete } = this.props

        return (
            <TodoListUI
                inputValue={inputValue}
                list={list}
                handleInputChange={handleInputChange}
                handleButtonClick={handleButtonClick}
                handleItemDelete={handleItemDelete}
            />
        )
    }

    componentDidMount() {
        const action = getInitListAction();
        store.dispatch(action);
    }
}

const mapStateToProps = (state) => {
    return {
        inputValue: state.inputValue,
        list: state.list
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        handleInputChange(e) {
            const action = getInputChangeAction(e.target.value);
            dispatch(action);
        },

        handleButtonClick() {
            const action = getAddAction();
            dispatch(action);
        },

        handleItemDelete(index) {
            const action = deleteItem(index);
            dispatch(action);
        }
    }
}

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

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList'
import store from './store/index'
import { Provider } from 'react-redux'

const APP = (
    <Provider store={store}>
        <TodoList />
    </Provider>
)

ReactDOM.render(APP, document.getElementById('root'));