Преимущество реселекта над контейнерным компонентом - PullRequest
Новая
       31

Преимущество реселекта над контейнерным компонентом

0 голосов
/ 11 мая 2018

https://redux.js.org/recipes/computing-derived-data описывает, как использовать повторный выбор createSelector () , чтобы избежать ненужных обновлений, когда компонент зависит от свойств, которые являются вычисляемыми значениями.

Альтернативой, по-видимому, является перемещение необходимых вычислений в (надеюсь) легкий контейнерный компонент, который вместо этого подключен к хранилищу. В этом случае mapStateToProps () будет возвращать ссылки на хранилище, а connect () не будет инициировать обновление компонента контейнера, если только соответствующие значения в хранилище не изменились: 

import { connect } from 'react-redux'

import { toggleTodo } from '../actions'
import TodoList from '../components/TodoList'

const mapStateToProps = state => {
    return {
        visibilityFilter: state.visibilityFilter,
        todos: state.todos,
    }
}

const mapDispatchToProps = dispatch => {
    return {
        onTodoClick: id => {
            dispatch(toggleTodo(id))
        }
    }
}

const connected = connect(
    mapStateToProps,
    mapDispatchToProps
)

const getVisibleTodos = (todos, filter) => {
    switch (filter) {
        case 'SHOW_ALL':
            return todos
        case 'SHOW_COMPLETED':
            return todos.filter(t => t.completed)
        case 'SHOW_ACTIVE':
            return todos.filter(t => !t.completed)
    }
}

const VisibleTodoList = connected((props) => {
    return <TodoList 
        todos={getVisibleTodos(props.todos, props.visibilityFilter)}
        onTodoClick={props.onTodoClick} 
    />
})

export default VisibleTodoList

Есть ли причины предпочитать повторный выбор над подключенным компонентом контейнера? Я не нахожу (m) никаких примеров, обсуждающих вышеупомянутый подход.

Ответы [ 2 ]

0 голосов
/ 18 мая 2018

Кроме того, во многих простых случаях (например, в примере с фильтрацией) вы можете выбрать более скромную функцию напоминания по сравнению с более церемониальной настройкой createSelector(): 

const selectVisibleTodos = memoize(getVisibleTodos)

const mapStateToProps = state => ({
    todos: selectVisibleTodos(state.todos, state.visibilityFilter),
})

против 

const selectVisibleTodos = createSelector(
    (state) => state.todos,
    (state) => state.visibilityFilter,
    getVisibleTodos
)

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

Плюсы:

  • Более краткий код
  • Быстрее, чем createSelector (Меньше внутренних накладных расходов)

Минусы:

  • Меньше разрыва между mapSateToProps и формой редукса state

Лично я склонен держать под рукой функции createSelector и memoize и выбирать между ними в каждом конкретном случае.

0 голосов
/ 11 мая 2018

Что если вам нужно использовать getVisibleTodos в нескольких контейнерах?

Селекторы отделяют ваши контейнеры от магазина. Когда форма магазина меняется, вам нужно только обновить селекторы, чтобы привести контейнеры в рабочее состояние.

По этой причине некоторые рекомендуют размещать селекторы рядом с редукторами.

Селекторы также полезны во время тестирования, позволяя вам делать утверждения с точки зрения логики предметной области, а не логики хранения. Это делает тесты менее хрупкими.

Полезно рассматривать селекторы и действия как две половины вашего API общедоступного хранилища, а все остальное как детали реализации, которые подвержены изменениям.

...