Подключение компонентов к глобальному состоянию редукции по сравнению с передачей реквизитов дочерним компонентам в React-Native

Question

У меня проблемы с пониманием, когда я должен передавать реквизиты дочерним компонентам, а не подключать эти компоненты непосредственно к состоянию.

Существует два способа получения реквизита компонентами в моем проекте:

1) Подключение компонента (дочернего или родительского) к глобальному состоянию приставки.Это позволяет мне указать, какие части глобального состояния будет получать мой компонент, но будет перерисовываться при изменении реквизита.

const mapStateToProps = state => ({
    error: state.error,
    progress: state.scan.progress,
    latitude: parseFloat(state.enrollment.latitude),
    longitude: parseFloat(state.enrollment.longitude),
});

export default connect(mapStateToProps)(MapViewHome);

2) Передача реквизита дочерним компонентам в типичном для React-Native стиле.

<MapViewHome error={this.props.error} progress={this.props.progress} latitude={this.props.latitude} longitude={this.props.longitude} /> 

Я спрашиваю об этом потому, что у меня есть parent component A, который связан с состоянием.

Parent component A передает реквизит x непосредственно в child B, который передает тот же реквизит x в child C.

Если изменяется реквизит x, это вызывает компоненты A, B и C для повторного рендеринга.Я мог бы избежать повторного рендеринга компонентов A и B, подключив child C непосредственно к состоянию, чтобы это был единственный компонент, на который повлияло изменение реквизита.

Но разве это хорошая практика для подключения маленьких дочерних компонентов к глобальному состоянию?Почему бы просто не подключить каждый компонент к состоянию?

Answer 1

Основным преимуществом использования компонентов без сохранения состояния является возможность многократного использования.Используя ваш пример, можно использовать версию MapViewHome без сохранения состояния, чтобы одновременно отображать на экране несколько карт с разными широтами и длинами, поскольку вы можете передавать разные реквизиты каждому.MapViewHome с состоянием может отображать только один объект, так как он зависит от глобального состояния.

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

Answer 2

Как правило, вам не нужно использовать свой магазин при захвате данных формы или если вы просто пытаетесь скрыть и показать элементы.Например, вы можете захотеть изменить локальное состояние при вводе данных в поле, а затем использовать это локальное состояние для передачи создателю thunk, который вы отправляете.Если бы вы могли предоставить немного больше контекста о том, чего конкретно вы пытаетесь достичь здесь, я был бы рад предоставить больше рекомендаций!

Answer 3

Это сложный вопрос, который сообщество редуксов / реактивов обсуждает тонну.

Вы, вероятно, можете найти тонны статей Medium и авторов React / Redux, которые обсуждают это.

Но датьВы обзор высокого уровня;Если вам кажется трудным «сверлить» реквизиты из CompA -> CompB -> CompC -> CompD, сохраните данные в формате redux.

Если данные нужны только из CompD -> CompE,Вы можете передать его как реквизит.

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

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