Question

我是新手做出反应。我有一个react + react路由器+ 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

}

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

2 个答案: