Я следую инструкциям по взаимодействию с Redux и Next.js.код работает нормально, пока я не добавил Redux.Я не могу понять ошибку ниже, это не дает мне много информации.Может кто-нибудь объяснить мне, где проблема.учебник действительно поставляется с файлами упражнений, но даже они имеют ту же проблему.Это может быть что-то в моей настройке, возможно.
No page context
Error: No page context
at Function._callee$ (C:\learnings\SSR\node_modules\next-redux-wrapper\lib\index.js:164:23)
at tryCatch (C:\learnings\SSR\node_modules\regenerator-runtime\runtime.js:62:40)
at Generator.invoke [as _invoke] (C:\learnings\SSR\node_modules\regenerator-runtime\runtime.js:288:22)
at Generator.prototype.(anonymous function) [as next] (C:\learnings\SSR\node_modules\regenerator-runtime\runtime.js:114:21)
at asyncGeneratorStep (C:\learnings\SSR\node_modules\next-redux-wrapper\lib\index.js:18:103)
at _next (C:\learnings\SSR\node_modules\next-redux-wrapper\lib\index.js:20:194)
at C:\learnings\SSR\node_modules\next-redux-wrapper\lib\index.js:20:364
at new Promise (<anonymous>)
at Function.<anonymous> (C:\learnings\SSR\node_modules\next-redux-wrapper\lib\index.js:20:97)
at Function.getInitialProps (C:\learnings\SSR\node_modules\next-redux-wrapper\lib\index.js:205:22)
at _callee$ (C:\learnings\SSR\node_modules\next\dist\lib\utils.js:86:30)
at tryCatch (C:\learnings\SSR\node_modules\regenerator-runtime\runtime.js:62:40)
at Generator.invoke [as _invoke] (C:\learnings\SSR\node_modules\regenerator-runtime\runtime.js:288:22)
at Generator.prototype.(anonymous function) [as next] (C:\learnings\SSR\node_modules\regenerator-runtime\runtime.js:114:21)
at asyncGeneratorStep (C:\learnings\SSR\node_modules\@babel\runtime-corejs2\helpers\asyncToGenerator.js:5:24)
at _next (C:\learnings\SSR\node_modules\@babel\runtime-corejs2\helpers\asyncToGenerator.js:27:9)
Мой Index.js выглядит следующим образом
import React from 'react';
import { bindActionCreators } from 'redux';
import { initStore, initialPosters, addItem } from '../store';
import withRedux from 'next-redux-wrapper';
import './index.css';
import Poster from './Poster';
class Index extends React.Component {
static async getInitialProps ({ store }) {
store.dispatch(initialPosters());
}
render () {
return (
<div className="App">
<header className="App-header">
<img src="/static/logo.png"
className="static-logo" alt="logo"
/>
</header>
<div className="Grid">
{
this.props.Posters.map((Poster) => (
<Poster key={Poster.id} />
))
}
</div>
</div>
)
}
};
const mapDispatchToProps = (dispatch) => {
return {
initialPosters: bindActionCreators(initialPosters, dispatch),
addItem: bindActionCreators(addItem, dispatch)
}
}
const mapStateToProps = (state) => {
return {
Posters: state.Posters,
}
}
export default withRedux(initStore, mapStateToProps, mapDispatchToProps)(Index);
my store.js
import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunkMiddleware from 'redux-thunk';
import data from './data/data.json';
// initial state
const startState = {
posters: []
}
// Actions
export const initialposters = () => {
return {
type: 'INITIALPOSTERS',
posters: data
}
}
export const addItem = (item) => {
return {
type: 'ADD',
item
}
}
// reducers
export const reducer = (state = initialState, action) => {
switch (action.type) {
case 'INITIALPOSTERS':
return {
posters: action.posters,
}
case 'ADD':
return {
...state,
posters: [...state.posters, action.item]
}
default: return state
}
}
// create store
export const initStore = (initialState = startState) => {
return createStore(reducer, initialState, composeWithDevTools(applyMiddleware(thunkMiddleware)));
}
Poster.js
import './Poster.css';
const Poster = (props) => (
<div className="Poster">
<div className="front">
<img src="/static/product.jpg" alt="Avatar" className="Poster-image" />
<div className="container">
<h3>A product <span className="price">$24.99</span></h3>
<p>A description </p>
</div>
</div>
</div>
);
export default Poster;
Трассировка стека ошибок предлагает строку 164 в index.js в next-redux-wrapper, которая заканчивается здесь
case 2:
if (appCtx.ctx) {
_context.next = 4;
break;
}
throw new Error('No page context');
Я новичок в реакции и избыточности, поэтому я не могу ничего из этого сделать,хорошо, что он не работает, поэтому здесь есть возможность что-то решить: D
это платное руководство;поэтому не уверен, что эта ссылка будет работать для людей.https://www.lynda.com/React-js-tutorials/React-Server-Side-Rendering/679641-2.html