reselect

creating a memoized selector

createSelector

• input-selectors의 배열을 받는다. 배열의 값은 함수로 변형시킨다.

• 만약 redux state tree가 input-selector의 값을 변경시키는 방식으로 변경되면, 셀렉터는 input-selector의 값을 인자로 사용하여 변형 함수를 호출하고 결과를 리턴할 것이다.

• 만약 input-selector의 값이 selector에게 이전에 호출했던 것과 똑같다면, 변경된 함수를 호출하는 대신 이전에 계산된 값을 리턴할 것이다.

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)
    }
  }
)

input-selector

• getVisibilityFilter

• getTodos

getVisibleTodos만 memoized selector, input-selector는 non-memoized selector.

Composing Selectors

memoized selector가 input-selector가 될 수 있다. getVisibleTodos가 input-selector가 된 것을 볼 수 있다.

const getKeyword = (state) => state.keyword

const getVisibleTodosFilteredByKeyword = createSelector(
  [ getVisibleTodos, getKeyword ],
  (visibleTodos, keyword) => visibleTodos.filter(
    todo => todo.text.includes(keyword)
  )
)