React-Redux: зачем нам оборачивать компонент с помощью провайдера?

Question

Рекомендуется использовать Redux в приложении React для упаковки компонента в компонент «Провайдер»:

const rootElement = document.getElementById('root')
ReactDOM.render(
  <Provider store={store}>
    <TodoApp />
  </Provider>,
  rootElement
)

Это можно увидеть в документации React-Redux: https://react -redux.js.org / введение / basic-tutorial .

Какую пользу мы получаем от такого отношения?Почему бы просто не импортировать «store» внутри компонента «ToDoApp» и получить доступ к «store» как импортированной переменной?Например:

import { store } from './store';

class TodoApp extends Component {
  constructor(props) {
    super(props);
    console.log('constructor')
  }
  render() {
    console.log(store.getState());
  }
}

Answer 1

Это очень важно для работы react-redux.

Когда вы используете connect над своим компонентом, он пытается получить хранилище из установленного вами Provider, используя механизм контекста React.

Маловероятно, что вы будете использовать Redux в React без использования connect, поэтому я бы посоветовал вам сохранить его там.