Разница между использованием React-Redux <Provider>и connect ()

Question

Меня смущает, почему приложение create-реагирует на приложения

import {store} from './our-redux-store'

const app = () => {

   return (
       <Provider store={store}>
          <WholeAppGoesHere/>
       </Provider>
   )
}

по сравнению с использованием соединения с таким компонентом, как:

import {connect} from 'react-redux';

class MyComp {
   // ...
}

export default connect(
  mapState,
  mapDispatch
)(MyComponent);

нам нужны оба? какая разница?

Answer 1

Провайдер является частью Функциональности React Context . Назначив ваше хранилище там, оно делает значение c хранилища доступным для всех потребителей этого контекста.

connect () с другой стороны - это компонент более высокого порядка, который внедряет ваши сопоставленные состояния и отправляет в реквизиты вашего базового компонента. Для этого он вызывает Consumer-часть этого API для доступа к контексту магазина.

Редактировать: https://react-redux.js.org/using-react-redux/accessing-store#understanding -context-using

Answer 2

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

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