--- title: Reselect --- ## Reselect Reselect is a simple selector library. Why do we need selectors? Official docs describe it this way: * Selectors can compute derived data, allowing Redux to store the minimal possible state. * Selectors are efficient. A selector is not recomputed unless one of its arguments changes. * Selectors are composable. They can be used as input to other selectors. It might sound complicated but selectors allow your app to work faster by reducing unnecessary recalculations. Normally, `mapStateToProps` functions are called for every component that needs it. With `reselect`, you can reduce duplicate computations. It's important to note that `reselect` is not specific to redux. In fact, it's not even a dependency or peer dependency. `reselect` just provides functions for getting data. Here's a trivial example: ```js const appState = { todos: [ { id: 1, name: 'Learn Redux', done: true }, { id: 2, name: 'Learn Reselect', done: false }, ] } ``` Now, I can write selectors that compute different data: ```js import { createSelector } from 'reselect' const getTodos = state => state.todos // root selector for todo state const getDoneTodos = createSelector( // your entire state is passed into the selectors, and is passed as an argument to the first function here: getTodos, // then, the return value of the above function gets passed to this next function todos => todos.filter(todo => todo.done) // the return value of this selector function will be the array of todos that are finished ) const getUnfinishedTodos = createSelector(getTodos, todos => todos.filter(todo => !todo.done)) ``` And finally, when I want to use these in my components, I can use `createStructuredSelector`: ```js import { createStructuredSelector } from 'reselect' import { connect } from 'react-redux' const Comp = ({ doneTodos, unfinishedTodos }) => (