React + redux：连接组件加载时调用调度

Question

我是新来的反应。我有一个 react + react router + redux 应用程序，我想从子组件进行调度调用。现在，调度发生在应用程序顶部的 index.js 文件中，它通过 redux thunk 操作和 api 调用从数据库加载所有数据：

const store = configureStore();
store.dispatch(loadCourses()); <-- redux thunk function calling api
store.dispatch(loadAuthors());

ReactDOM.render(
    <Provider store={store}>
       <Router history={browserHistory} routes={routes} />
    </Provider>,
    document.getElementById('app')
);

如果我想在下面的（连接的）子组件加载时加载数据或能够刷新数据怎么办？

import React, {PropTypes} from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import * as courseActions from '../../actions/courseActions';
import CourseList from './CourseList';
import {browserHistory} from 'react-router';


class CoursesPage extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.redirectToAddCoursePage = this.redirectToAddCoursePage.bind(this);
    }

    redirectToAddCoursePage() {
        browserHistory.push('/ReactJS/course');
    }

    render() {
        const {courses} = this.props;
        return (
            <div>
                <div className="page-header">
                    <h3>Courses</h3>
                </div>
                <input type="submit" value="New Course" className="btn btn-default btn-toolbar pull-right" onClick={this.redirectToAddCoursePage} />
                <div className="panel panel-default ">
                    <div className="panel-heading">
                        <span>&nbsp;</span>
                    </div>
                    <CourseList courses={courses} />
                </div>
            </div>        
        );
    }
}

CoursesPage.propTypes = {
    courses: PropTypes.array.isRequired,
    actions: PropTypes.object.isRequired
};

function mapStateToProps(state, ownProps) {
    return {
        courses: state.courses
    };
}

function mapDispatchToProps(dispatch) {
    return {
        actions: bindActionCreators(courseActions, dispatch),
    };
}

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

在我看来，当前的设置方式（来自我遵循的教程）在应用程序启动时从整个数据库加载所有数据效率低下，特别是如果多个数据可能有数千行表格。

所以如果我想在这个组件加载时调用store.dispatch(loadCourses())，它会去哪里？

Answer 1

您可能希望在组件的 componentDidMount() 生命周期方法中调用它。来自文档：

componentDidMount() 在组件安装后立即调用。需要 DOM 节点的初始化应该放在这里。如果您需要从远程端点加载数据，这是实例化网络请求的好地方。在此方法中设置状态将触发重新渲染。

https://facebook.github.io/react/docs/react-component.html#componentdidmount

Answer 2

如果您将组件中的操作作为道具获取并在需要时直接调用它们：

class CoursePage extends React.Component {
  constructor(props) {
    // ...
    this.handleClick = this.handleClick.bind(this) // available to click in component with proper scope set
  }

  componentWillMount() {
    // called before component inits (only once)
    // this would be your first load, rather than calling it right
    // after you create your store
    this.props.loadCourses()
  }

  handleClick() {
    // click handler
    this.props.loadCourses();
  }

  // ...

  render() {
    // ... the rest of your component
     <button onClick={handleClick}>Refresh data</button>
    // ... the rest of your component

}