Selectors

• Should learn the use of reselect
  • reuse cached calculation result
  • https://github.com/reactjs/reselect

Reference

Design principle: All mapStateToProps are selectors

• All mapStateToProps in containers are selectors

import { searchDestinationResult, someAttributes } from '../selectors';

const LocationSearch = ({searchDestinationResult}) => {
}

const mapStateToProps = (state, ownProps) => ({
    searchDestinationResult: searchDestinationResult(state, ownProps),
    someAttributes: someAttributes(state, ownProps)
})

const mapDispatchToProps = (dispatch, ownProps) => { ... }

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(LocationSearch)

• If all mapStateToProps are selectors, it is suggested to further merge into one Props

// ./selectors
const searchDestinationResult = createSelector();
const someAttributes = createSelector();

export const searchDestinationProps = createSelector(
    searchDestinationResult,
    someAttributes,
    (searchDestinationResult, someAttributes) => ({searchDestinationResult, someAttributes})
);

// ./components/LocationSearch/index.js

import { searchDestinationProps } from '../selectors';
import * as actions from '../actions'

const LocationSearch = ({searchDestinationResult}) => {
}

export default connect(searchDestinationProps, actions)(LocationSearch)

Design principle: Optimisation of re-select

• Always try to minimise the calculation chance on architecture design
  • E.g. On search some matched Location entity from a collection by a Keyword and AdvanceFilterOptions, Keyword, considering the case of auto-complete, is more likely to be changed compared to AdvanceFilterOptions.

const searchDestinationResult = createSelector(
    current_keyword,
    advance_filter_options,
    full_location_catalog,
    (current_keyword, advance_filter_options, full_location_catalog) => 
        _.chain(full_location_catalog).filter(advance_filter_options).filter({keyword: current_keyword}).value()
)

const filteredResult = createSelector(
    advance_filter_options,
    full_location_catalog, 
    (advance_filter_options, full_location_catalog) =>
        _.chain(full_location_catalog).filter(advance_filter_options).value()
)

const searchDestinationResultWithLessCalculation = createSelector(
    current_keyword,
    filteredResult,
    (current_keyword, filteredResult) => 
        _.chain(filteredResult).filter({keyword: current_keyword}).value()
)