React Redux: Provider и компонент Webpage

Provider в React Redux позволяет извлекать данные из хранилища и передавать их в компоненты.

Создание компонента Webpage

Создадим компонент Webpage, отображающий данные из хранилища. Создайте папку components и файл webpage.js с следующим кодом:

import React from 'react';

const Webpage = (props) => (
  <div>
    <h3>Cars</h3>
    <h3>Details</h3>
    <hr />
  </div>
);

export default Webpage;

Компонент отображает заголовки «Cars» и «Details», разделенные горизонтальной линией. В дальнейшем он будет отображать данные из хранилища Redux.

Подключение компонента и провайдера в index.js

Подключим компонент и провайдер в index.js. Импортируем Provider из react-redux и Webpage из components/webpage.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import Webpage from './components/webpage';
// ... (остальной код из index.js)

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}> {/* store - хранилище Redux */}
    <Webpage />
  </Provider>
);

Заменим предыдущее содержимое render на Webpage, обернутый в Provider. Атрибут store указывает на хранилище Redux.

Использование провайдера для доступа к хранилищу

Компонент Webpage пока не использует данные из хранилища. Provider обеспечивает доступ к хранилищу Redux. В последующих уроках мы покажем, как извлекать и отображать данные. Сейчас мы создали структуру для использования данных из хранилища Redux.

Мы научились создавать компоненты в React, подключать их и использовать Provider из react-redux для доступа к хранилищу Redux. Это важный шаг в разработке приложений с Redux.