Много было написано о реакции, сокращении и однонаправленных потоках данных, а также о том, как вы можете объединить все это, чтобы сделать радужного пердящего единорога из вашего одностраничного приложения. Однако в этом посте Имма рассказывает о шаблоне Provider, который используется React-Redux (и MobX, и Apollo, и любой другой будущей инфраструктурой).
Различные языки программирования и фреймворки предложили разные реализации шаблона Provider. Я собираюсь написать о шаблоне Provider в мире реакции.
Прежде чем мы узнаем больше о шаблоне Поставщик, будет полезно просмотреть контекстную документацию здесь. Я попытаюсь обобщить то, что контекстный api может сделать для нас, на изображениях ниже (графическое изображение не является моей фортой, но, тем не менее, я пытаюсь предпринять отважные попытки) -
По сути, добавление данных в контекст узла делает эти данные доступными для всего поддерева этого узла. Обычно мы используем контекстный api, чтобы сделать данные доступными для всего дерева компонентов. Хорошим вариантом использования context api будет тематизация связанных данных, к которым мы хотим, чтобы все наши узлы имели доступ. Угадайте, что еще можно сделать доступным для всех узлов в дереве компонентов через контекстный api? Да, вы правильно поняли - магазин redux.
<Provider store={store}>
<App />
</Provider>
Приведенный выше фрагмент кода гарантирует, что хранилище redux доступно для всех узлов в дереве компонентов через контекстный API. Фактически, именно так функция «connect» получает доступ к хранилищу redux, хотя мы никогда явно не передаем хранилище в качестве ссылки или параметра где-либо. В общих чертах, код «подключения» похож на (только семантику - реальный код намного надежнее) -
const connect = Component => class extends React.Component {
constructor(props, context) {
super(props, context);
const { store } = context;
// do everything related to store subscriptions, etc, here.
}
render() {
return // refer actual code on github :)
// https://github.com/reduxjs/react-redux/blob/master/src/components/connectAdvanced.js
}
}
Вот и все - компонент Provider, который задает контекст, и аккуратный HoC, который извлекает необходимые данные из контекста, установленного Provider. Вместе они создают довольно хороший опыт разработчика и устраняют множество основных сложностей. Аккуратно, да?
