Single <Provider> для многих компонентов

Question

У меня есть следующая структура в моей корневой компонент

<div className={styles.main_container}> 
    <Provider store={store}> 
    <Topbar></Topbar> 
    </Provider> 
    <div className={styles.scene_and_tools}> 
    <Provider store={store}> 
     <Sidebar></Sidebar> 
    </Provider> 
    <Provider store={store}> 
     <Scene></Scene> 
    </Provider> 
    </div> 
    <Provider store={store}> 
    <Timeline></Timeline> 
    </Provider> 
</div> 

Это прекрасно работает, но я считаю, это немного не так «СУХОЙ» повторить <Provider> для каждого отдельного компонента, который я хочу передать контекст. Так что я попытался

<div className={styles.main_container}> 
    <Provider store={store}> 
    <Topbar></Topbar> 
    <div className={styles.scene_and_tools}> 
     <Sidebar></Sidebar> 
     <Scene></Scene> 
    </div> 
    <Timeline></Timeline> 
    </Provider> 
</div> 

Но я получаю следующее сообщение об ошибке:

Failed propType: Invalid prop `children` supplied to `Provider`, 
expected a single ReactElement. Check the render method of `App`. 

Есть ли способ, чтобы сделать мой код более DRY или я должен жить с этой избыточностью?

Answer 1

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

Предполагаемый прецедент для Provider предназначен для обертывания самого корневого компонента. Затем все дети и внуки получат магазин неявно. Вы должны сделать это только один раз и поместить в него один элемент React. Ваш второй пример не работает, потому что вы помещаете в него три элемента: Topbar, div и Timeline. Оберните внешний div, и он будет работать. Еще лучше, переместите Provider в том месте, где вы звоните ReactDOM.render(), и оберните в него свой самый корень App. Тогда вам это больше не нужно.