React + redux: dispatching a call when connecting components
I'm new to react. I have react + react on router + shortcut where I want to make a dispatch call from a child component. Right now, the submission is happening in my index.js file at the very top of the app, where it loads all data from the database using the reducex thunk action and the api call:
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')
);
What if I want to load data or update it when my (connected) child component below is loaded?
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> </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);
It seems to me that it is currently set up (from the tutorial I followed), which loads ALL data from the entire database when the application starts, is inefficient, especially if there might be thousands of rows of data across multiple tables.
So if I wanted to call store.dispatch(loadCourses())
from this component when it loads, where would it go?
source to share
You probably want to call this in componentDidMount()
your component's lifecycle method . From the docs:
componentDidMount () is called immediately after the component is installed. Initialization that requires DOM nodes should go here. If you need to download data from a remote endpoint, this is a good place to instantiate a network request. The setting state in this method will result in re-rendering.
https://facebook.github.io/react/docs/react-component.html#componentdidmount
source to share
If you capture your actions in your component as props and call them directly when you need it:
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
}
source to share