## Redux Selector Pattern

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

```js
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:

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

Today we `mapStateToProps` for all incomplete items like this:

```js
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`. 

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!!!

```js
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) {
  return state.listOfItems.filter((item) => {
    return !item.completed
  });
}
```

And we update our `mapStateToProps` function:

```js
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](https://github.com/reactjs/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.