Реагируйте с редуксом - PullRequest
       6

Реагируйте с редуксом

0 голосов
/ 12 декабря 2018

Я следую инструкциям по взаимодействию с 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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...