Как приложение подключается к нескольким компонентам и многоуровневым компонентам?

Question

Я видел пример кода внутри файла App.js, настраивающий ComponentA:

let connectedComponent = connect(
    mapStateToProps,
    mapDispatchToProps
)(ComponentA);


export default connectedComponent;

, но что, если App также необходимо использовать ComponentB - как ты это настроил? Что если ComponentB нужно использовать ComponentC, а также настроить его?

Answer 1

Самое ясное решение для этого - просто поместить все компоненты в отдельные файлы и соединить каждый из них с редуксом со своими mapStateToProps и mapDispatchToProps параметры. Затем вы можете импортировать компоненты в приложение. js и использовать их.

Answer 2

что, если приложению также необходимо использовать ComponentB - как его настроить? Что, если для ComponentB необходимо использовать Component C, а также настроить его?

Если я правильно понял ваш вопрос, componentB и component C или / и componentN будут определены как дочерние компоненты из App.js.

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

Answer 3

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

См. Компоненты высшего порядка в Реагируйте на документацию, чтобы понять, как работает connect.

Также полезно знать, что, поскольку hooks, это не единственный вариант. Вы можете использовать функции useSelector и useDispatch, экспортированные из act-redux , чтобы использовать состояние избыточности и диспетчеризировать действия в компонентах с поддержкой перехвата.