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

Question

我是新手。我有一个反应 + 反应路由器 + 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() is invoked immediately after a component is mounted. Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request. Setting state in this method will trigger a re-rendering.

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

}

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

React + redux: call dispatch when connected component loads

reactjs

react-router

redux

redux-thunk

react-redux