Как избежать сложных иерархий в индексе реагирования

Question

Я программирую свое первое приложение в ReactJs + Redux. Это усложняется, добавляется больше провайдеров, поэтому мой index.js начинает выглядеть немного некрасиво:

ReactDOM.render(
<Provider store={store}>
    <IntlProvider locale={language} messages={messages[language]}>
        <AlertProvider template={AlertTemplate} {...options}>
            <BrowserRouter>
                <div className='main'>
                    <Header />

                    <div className="content">
                        <Switch>
                            [...]
                            <Route path="/list" component={List} />

                            <Route path="/message" component={MessageList} />
                            [...]
                        </Switch>
                    </div>
                    <Footer />
                </div>
            </BrowserRouter>
        </AlertProvider>
    </IntlProvider>
</Provider>,

Вопрос: есть ли способ избежать этой иерархии и написать то же самое более элегантно?

Answer 1

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

ReactDOM.render(
    compose(
        Provider({ store }),
        IntlProvider({ locale: language, messages: messages[language] }),
        AlertProvider({ template: AlertTemplate, ...options }),
        BrowserRouter(),
        // ... Add more HOCs here
    )(
        <div className="main">
            <Header />

            <div className="content">
                <Switch>
                    [...]
                    <Route path="/list" component={List} />
                    <Route path="/message" component={MessageList} />
                    [...]
                </Switch>
            </div>
            <Footer />
        </div>,
    ),
);