Where to load data in a React/Redux/Routerv4 app? - reactjs

Question

I am working on an app that functions almost entirely on the following route: /task/:taskId and there is nothing to render at the / route. Instead when you launch the app it should redirect to a task. Much like when you open slack and you are in a channel. Not on some page that says please select a channel. I cannot figure out where I'm suppose to load the tasks from the database.
Right now, I have a component that loads at / and in its componentDidMount method, I load the tasks from the database. Once the tasks are loaded, I do a history.push to redirect to the first task in the array of tasks from the database.
This all works great until I get redirected to a specific task and then refresh the page. That is, if I'm at /task/foobar and I refresh the page, the app doesn't load anything because tasks is only loaded from the database at /.
So what is the proper way to make sure that my data is loaded no matter which page I'm on?
EDIT - Adding some code for reference:
/routes.js - / uses Master.js and /task/:taskId uses TaskPage.js
import React from 'react';
import { Switch, Route } from 'react-router';
import App from './containers/App';
import Master from './containers/Master';
import TaskPage from './containers/TaskPage';
export default () => (
<App>
<Switch>
<Route exact path="/" component={Master} />
<Route path="/task/:taskId" component={TaskPage} />
</Switch>
</App>
);
/containers/Master.js - loadTasks is action creator that passes tasks data to tasks reducer. Also returns promise that resolves to the tasks data once loaded from local nedb database.
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { loadTasks } from '../actions/tasks';
class Master extends Component {
componentDidMount() {
this.fetchData();
}
fetchData() {
this.props.loadTasks()
.then(tasks => {
const id = tasks[Object.keys(tasks)[0]]._id;
this.props.history.push(`/task/${id}`);
return true;
})
.catch(e => {
console.log('ERROR', e);
});
}
render() {
return (
<div>
{this.props.children}
</div>
);
}
}
const mapStateToProps = (props, ownProps) => ({
taskId: ownProps.taskId
});
export default connect(mapStateToProps, {
loadTasks
})(Master);
/containers/TaskPage.js - Not much to see here. Just passing props to wrapped component Task which renders just fine as long as the app loads / first. If you hit /task/:taskId directly, nothing loads because the tasks data in the database only gets loaded to the redux store at /
import { connect } from 'react-redux';
import Task from '../components/Task';
const mapStateToProps = ({ tasks }, { match: { params: { taskId } } }) => ({
tasks,
taskId
});
export default connect(mapStateToProps)(Task);

Answer 1

Edit - I have removed my old answers in favor of what I think is a better approach based on some digging I've done.
I've seen a few things from Dan Abramov in a few places that make me think he'd do the data fetching inside of the component (not container) and he would use the componentDidMount lifecycle method to do so. The only piece I am not certain about is how best to decide if the app should display a loading status.
In Dan's and others' examples, they just check to see if state.loading is false and if state.items.length is 0. This only works if you always expect items to have data. But in my case, when you first launch the app, you will have no data in it so checking for 0 length doesn't really work. Instead I've added an initLoad property to the state.
I'm open to other ways of handling this if there are better methods.
routes.js
import React from 'react';
import { Switch, Route } from 'react-router';
import App from './containers/App';
import TaskPage from './containers/TaskPage';
export default () => (
<App>
<Switch>
<Route exact path="/" component={TaskPage} />
<Route path="/task/:taskId" component={TaskPage} />
</Switch>
</App>
);
TaskPage.js
import { connect } from 'react-redux';
import { withRouter } from 'react-router';
import { loadTasks } from '../actions/tasks';
import Task from '../components/Task';
const mapStateToProps = ({ tasks }, { match: { params: { taskId } } }) => ({
tasks,
taskId,
});
const mapDispatchToProps = dispatch => ({
loadTasks: () => dispatch(loadTasks())
});
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Task));
Task.js
import React, { Component } from 'react';
import type { tasksType } from '../reducers/tasks';
import SidebarContainer from '../containers/SidebarContainer';
class Task extends Component {
props: {
loadTasks: () => any,
initForm: () => any,
taskId: string,
tasks: tasksType,
history: any
};
componentDidMount() {
this.fetchData();
}
fetchData() {
this.props.loadTasks()
.then(tasks => {
const taskId = this.props.taskId;
if (!taskId) {
const id = tasks[Object.keys(tasks)[0]]._id;
this.props.history.push(`/task/${id}`);
}
return true;
})
.catch(e => {
console.log('ERROR', e);
});
}
render() {
const { tasks, taskId, initForm } = this.props;
if (!tasks.initLoad || (tasks.loading && Object.keys(tasks.items).length < 1)) {
return <div>Loading</div>;
}
return (
<div id="wrapper">
<SidebarContainer taskId={taskId} />
<div id="main">
<div id="group-details">
{tasks.initLoad && Object.keys(tasks.items).length > 0 ?
(<div>Task details would go here...</div>) :
(<div>Please create a task</div>)
}
</div>
</div>
</div>
);
}
}
export default Task;