Working with React and Redux is a great experience, but having some lower level knowledge of how these tools work is mandatory on larger projects.

When I first started using Redux, selectors came to my attention. Selectors are functions that return a part of your state, a selection. Because these functions could get abused by unexpected rerenders or something else, we should use them with care. Their result can be cached quiet easily, that’s where reselect and re-reselect enter the arena.

https://github.com/reactjs/reselect

Sound great and I would definitely use them, but for this story I am gonna write my own very basic caching function.

function mapStateToProps(state) {
  return {
    schools: state.schools,
    AmericanSchools: selectSchoolsByCountry('USA', state.schools),
  }
}

The function selectSchoolsByName selects a part of the state.schools. AmericanSchools is a selectors of state.schools.

function memoizeSelection(keyProp) {
  let cache = {};

  return function(name, stateProperty) {
    if(name in cache) {
      return cache[name];
    } else {
      const cachedProperty = stateProperty.filter(key => key[keyProp] === name);
      cache[name] = cachedProperty;
      return cachedProperty;
    }
  }
}
const memoizedSelection = memoizeSelection('location');
export const selectSchoolsByCountry = (name, stateProperty) => {
  return memoizedSelection(name, stateProperty);
};

Then selectSchoolsByCountry get exported with memoizedSelection. The curried function memoizeSelection that saves the object ‘cache’ gets returned. When selectSchoolsByCountry(‘USA’, state.schools) gets called, the first key in the cache object is USA, and gets saved in selectSchoolsByCountry.

This function still has a lot of shortcomings. For instance, what happens when the state gets updated, by polling or whatever. The key is cached so selectSchoolsByCountry will still return the same property.

Luckily https://github.com/reactjs/reselect does a great job.

Click on the link below for a fully functioning example.

Source: https://github.com/OscarBakker/react_redux_selectors

When you need a selector https://github.com/reactjs/reselect for example, you might not want this abstraction. But a lot of component just need an array or an object without modifying them. ConnectProps might be useful.

You pass in your component as the first argument and an array of state properties and you’re done.