Снижение состояния React-Redux и шаблон отправки

Question

Обычно я строил свои компоненты по следующей схеме:

import selectors from '../store/selectors'
import someAction1 from '../actions/someAction1'
import someAction2 from '../actions/someAction2'
import someAction3 from '../actions/someAction3'

class MyComponent extends React.Component {
  render() => {
    return <Fragment>
      <div>{this.props.someReduxProperty1}</div>
      <div>{this.props.someReduxProperty2}</div>
      <div>{this.props.someReduxProperty3}</div>
      <a onClick={this.props.someAction1}>Action1</a>
      <a onClick={this.props.someAction2}>Action2</a>
      <a onClick={this.props.someAction3}>Action3</a> 
    </Fragment>
  }
}

export default connect(
  (state, ownProps) => {
    return {
      someReduxProperty1: selectors.getSomeReduxProperty1(state),
      someReduxProperty2: selectors.getSomeReduxProperty2(state),
      someReduxProperty3: selectors.getSomeReduxProperty3(state)
    }
  },
  (dispatch) => {
    return {
      someAction1: () => {
        dispatch(someAction1())
      },
      someAction2: () => {
        dispatch(someAction2())
      },
      someAction3: () => {
        dispatch(someAction3())
      }
    }
  }
)(MyComponent)

Это действительно делает работу, но мне кажется, что я печатаю одни и те же вещи неоднократно, даже в этом тривиально коротком примере. Мои компоненты контейнера кажутся достаточно многословными к тому времени, когда они функционируют. Кроме того, я нахожу, что я часто изменяю список свойств и действий, используемых в компоненте, что делает его более расстраивающим из-за постоянной повторной перепечатки всего этого. Хотя большинство примеров, которые я читал о реакции + избыточности, похоже, отражает эту настройку кода.

Это действительно необходимо? Я обдумываю игнорирование того, что кажется лучшими практиками React + Redux, и просто прохожу через state и dispatch в качестве поддержки моих компонентов:

import selectors from '../store/selectors'
import someAction1 from '../actions/someAction1'
import someAction2 from '../actions/someAction2'
import someAction3 from '../actions/someAction3'

class MyComponent extends React.Component {
  render() => {
    const { state, dispatch } = this.props
    return <Fragment>
      <div>{selectors.getSomeReduxProperty1(state)}</div>
      <div>{selectors.getSomeReduxProperty2(state)}</div>
      <div>{selectors.getSomeReduxProperty3(state)}</div>
      <a onClick={() => { dispatch(someAction1()) }}>Action1</a>
      <a onClick={() => { dispatch(someAction2()) }}>Action2</a>
      <a onClick={() => { dispatch(someAction3()) }}>Action3</a>
    </Fragment>
  }
}

export default connect(
  (state, ownProps) => {
    return { state: state }
  }
  /* dispatch gets added by default */
)(MyComponent)

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

export default connectHelper = (componentClass) => {
  return connect((state) => {
    return { state: state }
  })(componentClass)
}

class MyComponent extends React.Component {
  ...
}

export default connectHelper(MyComponent)

Я теряю способность сразу увидеть, какие свойства используются в моем магазине Redux, просто скиммируя вызов connect. Я в порядке с этим.

Итак, мои вопросы:

1. Есть ли другие соображения, которыми я бы пожертвовал, по сути, обходя mapStatetoProps? Я обеспокоен тем, что, поскольку существует только одно свойство state, React может чрезмерно рендерить каждый компонент каждый раз, когда изменяется любое свойство в хранилище Redux. Вот почему необходимо отображать свойства вручную в mapStateToProps?

2. Что я теряю, пропуская mapDispatchToProps и используя введенную по умолчанию this.props.dispatch? Я должен сделать «дополнительную» работу, чтобы отобразить состояния непосредственно в mapDispatchToProps; что я получу за это усилие?

3. Существуют ли другие организации / шаблоны кода, помогающие уменьшить беспорядок в свойствах компонентов в настройке React + Redux?

Спасибо! Просто обхватить мою голову этими инструментами. Это было забавное упражнение, но некоторые вещи казались немного странными!

Answer 1

Да, есть много способов сократить это.

Во-первых, вы должны использовать форму "Сокращения объекта" mapDispatch:

const mapDispatch = {
    someAction1,
    someAction2,
    someAction3,
};

Во-вторых, хотя у нас нет эквивалента «сокращение объекта» для mapState, вы можете использовать реселект createStructuredSelector API , чтобы сделать то же самое.

И да, если вы передадите все значение state, ваш компонент теперь будет повторно выполнять рендеринг для при каждом обновлении хранилища Redux. React-Redux выполняет много внутренних работ, чтобы убедиться, что ваш собственный компонент перерисовывает только при необходимости , и это основано на значениях, возвращаемых вашей mapState функцией.

В-третьих, рассмотрите возможность использования деструктуризации в начале ваших компонентов, чтобы извлечь нужные им реквизиты, чтобы не повторять this.props. на каждой строке. Это может быть либо деструктуризация объекта в методе компонента класса render(), либо деструктуризация параметра функции для компонента функции.

Наконец, хотя это не относится к React, ознакомьтесь с нашим новым redux-starter-kit пакетом . Он включает в себя утилиты для упрощения нескольких распространенных случаев использования Redux, включая настройку хранилища, определение редукторов, логику неизменяемого обновления, проверку на случайные мутации и даже автоматическое создание целых «кусочков» состояния без написания каких-либо типов действий или создателей действий вручную.