Большую часть времени во время разработки приложения мы ищем лучший способ делать что-то, более оптимальный способ, который способствует лучшей производительности нашего приложения.
Недавно, работая над проектом, разработанным с помощью React и Redux, я оказался в ситуации, когда мне нужно было выполнить отправку нескольких действий Redux одновременно. Первым делом я выполнил вызовы следующим образом:
Нет ничего плохого в том, чтобы сделать это таким образом, именно так мы обычно отправляем действия. Каждый вызов вызывает синхронное обновление состояния приложения; который, в свою очередь, вызовет вызов функции рендеринга в каждом компоненте React, который связан с частью обновляемого состояния.
Но что, если у вас есть компонент, подключенный к части состояния, которая обновляется вызовом this.props.actions.changeTheme ('blue'), и одновременно с частью состояния, обновленного путем вызова this.props.actions.setModuleName ('Admin'), метод визуализации компонента будет вызываться как минимум дважды при вызове обоих действий в строке. Это не проблема, если вы считаете, что это не оказывает существенного влияния на производительность вашего приложения или если вы просто не заботитесь о том, чтобы функция рендеринга вызывалась несколько раз.
Если это представляет проблему для вас, как это имеет место для меня, то как вы могли бы ее решить? После некоторого чтения на страницах проблем Redux на Github я обнаружил, что в настоящее время вы можете решить эту проблему двумя способами:
- Отправляя только одно действие и имея несколько редукторов, обрабатывающих его.
- Используя redux-batched-actions, средство создания пакетных действий и связанный с ним редуктор более высокого порядка для Redux, который позволяет пакетировать уведомления подписчиков для массива действий.
Давайте посмотрим на очень общий пример первого подхода:
Благодаря этому вы можете напрямую справиться с ситуацией. В большинстве случаев это рекомендуемый способ, и вы должны сначала попробовать его, прежде чем переходить ко второму подходу, рекомендуется для случаев, когда первый подход вам не подходит.
Теперь посмотрим, как работать со вторым подходом:
Что он делает, так это создает редуктор более высокого порядка и действие по сокращению действий в рамках одного уведомления подписчика. Все действия, переданные в виде массива в функцию batchActions (), обрабатываются перед вызовом метода dispatch (), поэтому они могут быть обработаны редуктором более высокого порядка, а затем запускать один уведомление подписчика.
Обнаружение этого просто держало меня на правильном пути, по крайней мере, я так думаю;). Я надеюсь, что это тоже поможет всем вам.
