Написание более коротких контейнеров React-Redux

Если вы весь день пишете код response + redux, скорее всего, ваши пальцы привыкли печатать этот шаблон mapStateToProps, mapDispatchToProps и connect:

Ничего страшного. Функции можно использовать повторно, все просто, что не нравится?

В качестве эксперимента я написал это и в итоге сохранил его, потому что это сделало шаблон более лаконичным:

import {connect} from 'react-redux'
const reduxify = (container) =>
    connect(
        container.mapStateToProps,
        container.mapDispatchToProps,
    )(container.render)

Все, что мы делаем, - это передаем функции mapStateToProps, mapDispatchToProps и render вместе за один раз вместо использования двухэтапного последовательного вызова функции.

Вот новый, более короткий синтаксис, который использует функцию reduxify для создания «контейнера»:

Примерно ~ 9 строк шаблона превращается в ~ 6 строк, но, что более важно, это не снижает хороших качеств оригинала: тестируемость и простое повторное использование функций.

Тестирование и повторное использование

Может быть, вы хотите повторно использовать mapStateToProps более чем в одном месте или хотите провести модульное тестирование, не волнуйтесь!

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

import {mapStateToProps} from './other-component.js'
const Component = reduxify({
    mapStateToProps,
    render: (props) =>
        <div>...</div>
})

Вот пример mapStateToProps, определенного вне вызова reduxify:

Полезный читатель заметил, что mapDispatchToProps даже не обязательно должна быть функцией, если вы используете средства создания действий:

Загрузите библиотеку `reduxify`

Ха-ха, шучу, я не собираюсь давать вам npm пакет для 6-строчной функции, просто скопируйте / вставьте его :)

Написание более коротких контейнеров React-Redux