How to use the createSelector function from reselect

reselect.createSelector is a function that creates a memoized selector which efficiently computes and caches derived data from the Redux store, reducing unnecessary re-rendering of connected components.

How does reselect.createSelector work?

reselect.createSelector is a function that creates a memoized selector function that computes a derived data value from the input state, and returns the result of the computation. The memoization helps to improve performance by only recomputing the value when the input state has changed. The selector takes one or more input selectors as arguments, and a transform function that is used to compute the derived data value. When the input state changes, the input selectors are evaluated, and if the input values have not changed, the memoized value is returned instead of recomputing the transform function.

Ai Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { createSelector } from "reselect";

const getTodos = (state) => state.todos;
const getVisibilityFilter = (state) => state.visibilityFilter;

const getVisibleTodos = createSelector(
  [getTodos, getVisibilityFilter],
  (todos, visibilityFilter) => {
    switch (visibilityFilter) {
      case "SHOW_ALL":
        return todos;
      case "SHOW_COMPLETED":
        return todos.filter((t) => t.completed);
      case "SHOW_ACTIVE":
        return todos.filter((t) => !t.completed);
      default:
        throw new Error("Unknown filter: " + visibilityFilter);
    }
  }
);

const mapStateToProps = (state) => ({
  todos: getVisibleTodos(state),
});

In this example, createSelector takes an array of input selectors (getTodos and getVisibilityFilter) and a transform function that is used to compute a derived data value (getVisibleTodos). The getVisibleTodos selector takes the todos and visibilityFilter values from the state and returns a filtered list of todos based on the current visibility filter. Finally, the getVisibleTodos selector is used in a mapStateToProps function to map the derived data to props for a React component.