使用react-redux的基础上，通过saga中间件进行ajax数据请求。

Question

老师您好，又有问题想咨询老师，麻烦老师了。
学习完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'));

Answer 1

Dell 2019-12-12 01:42:22

目前这么写，确实是一个容器组件，还可以再拆一层，外层在做一次包裹，把componentDidMount放在外层组件中，但是就这么几行代码，没必要拆的这么细致。

• 提问者 Nnn_Lillian #1

  真是抱歉老师，我有点儿本笨。但是 再拆一层的话。我已经想不到怎么写了。如果把componentDidMount放在最外层。它的子组件todolist中就是放react-redux的，并且做业务操作。todolist的子组件todolistUI就是单纯的UI组件。是个三层结构 这样吗？

• Dell 回复 提问者 Nnn_Lillian #2

  最外层的获取数据，同时和store?。而内部的只是展示内容的UI组件，实际上两层即可。

• 提问者 Nnn_Lillian 回复 Dell #3

  哦哦，那就是按照我这么写，代码没有问题。然后对于connect的理解应该更加纯粹，它就是负责链接store。
  谢谢老师赐教！