Selectors

In the previous section, we worked with async data again. This data has been pushed to the application's Redux store. We have accessed it numerous times in mapStateToProps functions, for example, in the task list container:

const mapStateToProps = state => ({
    tasks: state.tasks.get('entities'),
    isLoading: state.tasks.get('isLoading'),
    hasError: state.tasks.get('hasError'),
    errorMsg: state.tasks.get('errorMsg')
});

This one is not looking very ugly, but for the task details page, it already is getting out of control. Consider the following:

// On this page we don't know if tasks are already fetched
const mapStateToProps = (state, ownProps) => ({
    task: state.tasks
        ? state.tasks
            .get('entities')
            .find(task => task.id === ownProps.taskId)
        : null
});

We do...