РЕДАКТИРОВАТЬ: Казалось бы, Next.js проходит по всем страницам, включенным в Layout, вызывая getInitialProps каждой из них, и что правильное решение для подключения всех этих страниц к избыточному store простоподключить каждый из них в отдельности.Это правильно?
Я успешно подключил Next.js, redux и redux-saga с помощью 'next-redux-saga' к одной странице на моем сайте.Я включил код для моего _app.js ниже, но в основном он просто следует примеру кода на сайте Next.js.Моя проблема в том, что все страницы (я имею в виду здесь видимые страницы на сайте, а не «страницы» Next.js) на сайте заключены в Layout внутри _app.js, так что каждая видимая страница состоит из заголовка, нижний колонтитул и раздел основного содержимого.
const MyLayout = (props) => (
<div>
{/* Calling the component called Header */}
<Header />
{/* Getting the data between tags from the pages */}
{props.children}
<Footer />
</div>
);
В данный момент я могу подключить основной раздел содержимого к хранилищу примитивов, но мне также необходимо подключить верхний и нижний колонтитулы.
Должен ли я подключить компонент Layout (myLayout, выше) к redux?Или «next-redux-saga» подключит все три файла, содержащиеся в Layout, если я подключу каждый из них по отдельности к redux?То есть сделать то же самое для 'header' и 'footer', которое я сделал для основной страницы контента?
Спасибо за любую помощь!
/ * _app.js * /
const { Component, pageProps, store } = this.props;
console.log('rendering _app.js, main render, props = ', this.props);
return (
<Container>
<Head />
{/* Wrap every page in Jss and Theme providers */}
<style dangerouslySetInnerHTML = {{ __html: style }} />
<JssProvider
registry={this.pageContext.sheetsRegistry}
generateClassName={this.pageContext.generateClassName}
>
{/* MuiThemeProvider makes the theme available down the React
tree thanks to React context. */}
<MuiThemeProvider
theme={this.pageContext.theme}
sheetsManager={this.pageContext.sheetsManager}
>
<Layout>
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
<CssBaseline />
{/* Pass pageContext to the _document though the renderPage enhancer
to render collected styles on server-side. */}
<Provider store={store}>
<Component pageContext={this.pageContext} {...pageProps} />
</Provider>
</Layout>
</MuiThemeProvider>
</JssProvider>
</Container>
);
}