Instantly share code, notes, and snippets.

Embed
What would you like to do?
Redux Selector Pattern

Redux Selector Pattern

Imagine we have a reducer to control a list of items:

function listOfItems(state: Array<Object> = [], action: Object = {}): Array<Object> {
  switch(action.type) {
    case 'SHOW_ALL_ITEMS':
      return action.data.items
    default:
    return state;
  }
}

Where Items looks like this:

type ItemType = {
  id: string,
  text: string,
  completed: boolean
};

Today we mapStateToProps for all incomplete items like this:

function mapStateToProps(state) {
  return {
    incompleteItems: state.listOfItems.filter((item) => {
      return !item.completed
    });
  }
}

The problem with this approach

There are a couple problems with this approach as the application grows.

  1. The implementation of incompleteItems may change.
  2. Computation logic occurs in mapStateToProps
  3. Can't memoize the values of incompleteItems

The Solution

After talking with Dan Abramov (founder of Redux) he has been preaching the colocation of functions called selectors with your reducers.

What is a selector?

  1. Selectors can compute derived data, allowing Redux to store the minimal possible state.
  2. Selectors are composable. They can be used as input to other selectors.

Let's turn our filter into a selector.

Place your selectors near the Redux reducer!!!

function listOfItems(state: Array<Object> = [], action: Object = {}): Array<Object> {
  switch(action.type) {
    case 'SHOW_ALL_ITEMS':
      return action.data.items
    default:
    return state;
  }
}

function getIncompleteItems(state: Object): Array<Object> {
  return state.listOfItems.filter((item) => {
    return !item.completed
  });
}

And we update our mapStateToProps function:

function mapStateToProps(state) {
  return {
    incompleteItems: getIncompleteItems(state)
  }
}

Now we can reuse this logic across many components mapping this exact state! We can unit test it as well! More importantly we can now memoize this state with reselect

Next Steps:

Now don't go and rewrite all your mapFns! We'll use this pattern going forward on new reducers and Redux connect components.

@aruprakshit

This comment has been minimized.

aruprakshit commented Sep 24, 2018

Thanks for putting it together.

@pkhodaveissi

This comment has been minimized.

pkhodaveissi commented Oct 2, 2018

short and comprehensive, thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment