Computing Derived Data

    Let's revisit the :

    containers/VisibleTodoList.js

    In the above example, calls getVisibleTodos to calculate todos. This works great, but there is a drawback: todos is calculated every time the component is updated. If the state tree is large, or the calculation expensive, repeating the calculation on every update may cause performance problems. Reselect can help to avoid these unnecessary recalculations.

    Creating a Memoized Selector

    We would like to replace getVisibleTodos with a memoized selector that recalculates todos when the value of state.todos or state.visibilityFilter changes, but not when changes occur in other (unrelated) parts of the state tree.

    Reselect provides a function createSelector for creating memoized selectors. createSelector takes an array of input-selectors and a transform function as its arguments. If the Redux state tree is changed in a way that causes the value of an input-selector to change, the selector will call its transform function with the values of the input-selectors as arguments and return the result. If the values of the input-selectors are the same as the previous call to the selector, it will return the previously computed value instead of calling the transform function.

    Let's define a memoized selector named getVisibleTodos to replace the non-memoized version above:

    selectors/index.js

    1. import { createSelector } from 'reselect'
    3. const getVisibilityFilter = state => state.visibilityFilter
    4. const getTodos = state => state.todos
    6. export const getVisibleTodos = createSelector(
    7.   [getVisibilityFilter, getTodos],
    8.   (visibilityFilter, todos) => {
    9.     switch (visibilityFilter) {
    10.       case 'SHOW_ALL':
    11.         return todos
    12.       case 'SHOW_COMPLETED':
    13.         return todos.filter(t => t.completed)
    14.       case 'SHOW_ACTIVE':
    15.         return todos.filter(t => !t.completed)
    16.     }
    17.   }
    18. )

    In the example above, getVisibilityFilter and getTodos are input-selectors. They are created as ordinary non-memoized selector functions because they do not transform the data they select. getVisibleTodos on the other hand is a memoized selector. It takes getVisibilityFilter and getTodos as input-selectors, and a transform function that calculates the filtered todos list.

    A memoized selector can itself be an input-selector to another memoized selector. Here is getVisibleTodos being used as an input-selector to a selector that further filters the todos by keyword:

    1. const getKeyword = state => state.keyword
    3. const getVisibleTodosFilteredByKeyword = createSelector(
    4.   [getVisibleTodos, getKeyword],
    5.   (visibleTodos, keyword) =>
    6.     visibleTodos.filter(todo => todo.text.indexOf(keyword) > -1)
    7. )

    Connecting a Selector to the Redux Store

    If you are using React Redux, you can call selectors as regular functions inside mapStateToProps():

    containers/VisibleTodoList.js

    1. import { connect } from 'react-redux'
    2. import { toggleTodo } from '../actions'
    3. import TodoList from '../components/TodoList'
    4. import { getVisibleTodos } from '../selectors'
    6. const mapStateToProps = state => {
    7.   return {
    8.     todos: getVisibleTodos(state)
    9.   }
    10. }
    12. const mapDispatchToProps = dispatch => {
    13.   return {
    14.     onTodoClick: id => {
    15.       dispatch(toggleTodo(id))
    16.     }
    17.   }
    18. }
    20. const VisibleTodoList = connect(
    21.   mapStateToProps,
    22.   mapDispatchToProps
    23. )(TodoList)
    25. export default VisibleTodoList

    For this example, we're going to extend our app to handle multiple Todo lists. Our state needs to be refactored so that it holds multiple todo lists, which each have their own todos and visibilityFilter state.

    We also need to refactor our reducers. Now that todos and visibilityFilter live within every list's state, we only need one todoLists reducer to manage our state.

    reducers/index.js

    1. import { combineReducers } from 'redux'
    2. import todoLists from './todoLists'
    4. export default combineReducers({
    5.   todoLists
    6. })

    reducers/todoLists.js

    The todoLists reducer now handles all three actions. The action creators will now need to be passed a listId:

    actions/index.js

    1. let nextTodoId = 0
    2. export const addTodo = (text, listId) => ({
    3.   id: nextTodoId++,
    4.   text,
    5.   listId
    6. })
    7. export const setVisibilityFilter = (filter, listId) => ({
    8.   type: 'SET_VISIBILITY_FILTER',
    9.   filter,
    10.   listId
    12. export const toggleTodo = (id, listId) => ({
    13.   type: 'TOGGLE_TODO',
    14.   id,
    15.   listId
    16. })
    17. export const VisibilityFilters = {
    18.   SHOW_ALL: 'SHOW_ALL',
    19.   SHOW_COMPLETED: 'SHOW_COMPLETED',
    20.   SHOW_ACTIVE: 'SHOW_ACTIVE'
    21. }

    components/TodoList.js

    1. import React from 'react'
    2. import PropTypes from 'prop-types'
    3. import Todo from './Todo'
    4. const TodoList = ({ todos, toggleTodo, listId }) => (
    5.   <ul>
    6.     {todos.map(todo => (
    7.       <Todo
    8.         key={todo.id}
    9.         {...todo}
    10.         onClick={() => toggleTodo(todo.id, listId)}
    11.       />
    12.     ))}
    13.   </ul>
    14. )
    16. export default TodoList

    Here is an App component that renders three VisibleTodoList components, each of which has a listId prop:

    components/App.js

    1. import React from 'react'
    2. import VisibleTodoList from '../containers/VisibleTodoList'
    4. const App = () => (
    5.   <div>
    6.     <VisibleTodoList listId="1" />
    7.     <VisibleTodoList listId="2" />
    8.     <VisibleTodoList listId="3" />
    9.   </div>
    10. )

    Each VisibleTodoList container should select a different slice of the state depending on the value of the listId prop, so we'll modify getVisibilityFilter and getTodos to accept a props argument.

    selectors/todoSelectors.js

    1. import { createSelector } from 'reselect'
    3. const getVisibilityFilter = (state, props) =>
    4.   state.todoLists[props.listId].visibilityFilter
    6. const getTodos = (state, props) => state.todoLists[props.listId].todos
    8. const getVisibleTodos = createSelector(
    9.   [getVisibilityFilter, getTodos],
    10.   (visibilityFilter, todos) => {
    11.     switch (visibilityFilter) {
    12.       case 'SHOW_COMPLETED':
    13.         return todos.filter(todo => todo.completed)
    14.       case 'SHOW_ACTIVE':
    15.         return todos.filter(todo => !todo.completed)
    16.       default:
    17.         return todos
    18.     }
    19.   }
    20. )
    22. export default getVisibleTodos

    props can be passed to getVisibleTodos from mapStateToProps:

    So now getVisibleTodos has access to props, and everything seems to be working fine.

    But there is a problem!

    containers/VisibleTodoList.js

    1. import { connect } from 'react-redux'
    2. import { toggleTodo } from '../actions'
    3. import TodoList from '../components/TodoList'
    4. import { getVisibleTodos } from '../selectors'
    6. const mapStateToProps = (state, props) => {
    7.   return {
    8.     // WARNING: THE FOLLOWING SELECTOR DOES NOT CORRECTLY MEMOIZE
    9.     todos: getVisibleTodos(state, props)
    10.   }
    12. const mapDispatchToProps = dispatch => {
    13.   return {
    14.     onTodoClick: id => {
    15.       dispatch(toggleTodo(id))
    16.     }
    17.   }
    18. }
    20. const VisibleTodoList = connect(
    21.   mapStateToProps,
    22.   mapDispatchToProps
    23. )(TodoList)
    25. export default VisibleTodoList

    A selector created with createSelector only returns the cached value when its set of arguments is the same as its previous set of arguments. If we alternate between rendering <VisibleTodoList listId="1" /> and <VisibleTodoList listId="2" />, the shared selector will alternate between receiving {listId: 1} and {listId: 2} as its props argument. This will cause the arguments to be different on each call, so the selector will always recompute instead of returning the cached value. We'll see how to overcome this limitation in the next section.

    Sharing Selectors Across Multiple Components

    In order to share a selector across multiple VisibleTodoList components and retain memoization, each instance of the component needs its own private copy of the selector.

    Let's create a function named makeGetVisibleTodos that returns a new copy of the getVisibleTodos selector each time it is called:

    selectors/todoSelectors.js

    1. import { createSelector } from 'reselect'
    3. const getVisibilityFilter = (state, props) =>
    4.   state.todoLists[props.listId].visibilityFilter
    6. const getTodos = (state, props) => state.todoLists[props.listId].todos
    8. const makeGetVisibleTodos = () => {
    9.   return createSelector(
    10.     [getVisibilityFilter, getTodos],
    11.     (visibilityFilter, todos) => {
    12.       switch (visibilityFilter) {
    13.         case 'SHOW_COMPLETED':
    14.           return todos.filter(todo => todo.completed)
    15.         case 'SHOW_ACTIVE':
    16.           return todos.filter(todo => !todo.completed)
    17.         default:
    18.           return todos
    19.       }
    20.     }
    21.   )
    22. }
    24. export default makeGetVisibleTodos

    We also need a way to give each instance of a container access to its own private selector. The mapStateToProps argument of connect can help with this.

    If the mapStateToProps argument supplied to connect returns a function instead of an object, it will be used to create an individual mapStateToProps function for each instance of the container.

    In the example below makeMapStateToProps creates a new getVisibleTodos selector, and returns a mapStateToProps function that has exclusive access to the new selector:

    1. const makeMapStateToProps = () => {
    2.   const getVisibleTodos = makeGetVisibleTodos()
    3.   const mapStateToProps = (state, props) => {
    4.     return {
    5.       todos: getVisibleTodos(state, props)
    6.     }
    7.   }
    8.   return mapStateToProps
    9. }

    If we pass makeMapStateToProps to connect, each instance of the VisibleTodosList container will get its own mapStateToProps function with a private getVisibleTodos selector. Memoization will now work correctly regardless of the render order of the VisibleTodoList containers.

    containers/VisibleTodoList.js

    1. import { connect } from 'react-redux'
    2. import { toggleTodo } from '../actions'
    3. import TodoList from '../components/TodoList'
    4. import { makeGetVisibleTodos } from '../selectors'
    6. const makeMapStateToProps = () => {
    7.   const getVisibleTodos = makeGetVisibleTodos()
    8.   const mapStateToProps = (state, props) => {
    9.     return {
    10.       todos: getVisibleTodos(state, props)
    11.     }
    12.   }
    13.   return mapStateToProps
    14. }
    16. const mapDispatchToProps = dispatch => {
    17.   return {
    18.     onTodoClick: id => {
    19.       dispatch(toggleTodo(id))
    20.     }
    21.   }
    22. }
    24. const VisibleTodoList = connect(
    25.   makeMapStateToProps,
    26.   mapDispatchToProps
    27. )(TodoList)
    29. export default VisibleTodoList