与redux反应

Question

我正在跟踪有关与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);

我的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;

错误堆栈跟踪显示next-redux-wrapper中index.js中的第164行，此行此处结束

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