Redux ~ Selector - rohit120582sharma/Documentation GitHub Wiki

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.

Reselect is a simple library for creating memoized, composable selector functions.

Reselect provides a function createSelector for creating memoized selectors.

The 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.

• https://github.com/reduxjs/reselect

npm install reselect --save

In the example below, 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.

import { createSelector } from 'reselect';
​
const getVisibilityFilter = state => state.visibilityFilter;
const getTodos = state => state.todos;
​
export const getVisibleTodos = createSelector(
	[getVisibilityFilter, getTodos],
	(visibilityFilter, todos) => {
		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)
		}
	}
);

The Composed Selectors are built through reselects createSelector function. The first argument is an array of selector functions. These can either be base selectors or other composed selectors. createSelector gets the values of those selectors and then passes them as variables into a callback that is provided as the second argument. The return value of this callback is going to be the return value of the selector.

Here is getVisibleTodos being used as an input-selector to a selector that further filters the todos by keyword:

const getKeyword = state => state.keyword;
​
const getVisibleTodosFilteredByKeyword = createSelector(
	[getVisibleTodos, getKeyword],
	(visibleTodos, keyword) => visibleTodos.filter(todo => todo.text.indexOf(keyword) > -1)
);

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

import { connect } from 'react-redux';
import { toggleTodo } from '../actions';
import TodoList from '../components/TodoList';
import { getVisibleTodos } from '../selectors';

const mapStateToProps = state => {
	return {
		todos: getVisibleTodos(state)
	}
}
const mapDispatchToProps = dispatch => {
	return {
		onTodoClick: id => {
			dispatch(toggleTodo(id))
		}
	}
}
const VisibleTodoList = connect(mapStateToProps, mapDispatchToProps)(TodoList);
export default VisibleTodoList;

Plz refer references

Plz refer references