Next.js + Reduxサーバー側レンダリング：データはありますが、サーバー側ではレンダリングされません。

Question

私はNext.jsアプリケーションにreduxインテグレーションを追加しようとしていますが、すべきだ。実装はthe official nextjs redux exampleに基づいています。

最後に、ページがサーバーから戻ってくると、そのデータはJSONデータとして出力されますが、このデータに基づく実際のレンダリングは行われませんでした。奇妙なことは、私がreduxを使用する前に、です。コンテンツDIDは、それがであるべき方法でレンダリングされます。

もちろん、Reactのチェックサム警告も表示されています。これは、サーバー上のマークアップが異なることを示しています。

サーバ側で正しく動作させる方法がわかりません。私が紛失しているものがありますか？ここで

がNext.jsによって生成されたHTMLです：あなたが見ることができるように、initialState値が移入され

<h1 data-reactid="3">Test page</h1> 

</div></div></div><div id="__next-error"></div></div><div><script> 
      __NEXT_DATA__ = {"props":{"isServer":true,"store":{}, 

"initialState":{"authors":{"loading":false,"items":{"4nRpnr66B2CcQ4wsY04CIQ":… } 

,"initialProps":{}},"pathname":"/test","query":{},"buildId":1504364251326,"buildStats":null,"assetPrefix":"","nextExport":false,"err":null,"chunks":[]} 
      module={} 
      __NEXT_LOADED_PAGES__ = [] 
      __NEXT_LOADED_CHUNKS__ = [] 

      __NEXT_REGISTER_PAGE = function (route, fn) { 
      __NEXT_LOADED_PAGES__.push({ route: route, fn: fn }) 
      } 

      __NEXT_REGISTER_CHUNK = function (chunkName, fn) { 
      __NEXT_LOADED_CHUNKS__.push({ chunkName: chunkName, fn: fn }) 
      } 
     </script><script async="" id="__NEXT_PAGE__/test" type="text/javascript" src="/_next/1504364251326/page/test"></script><script async="" id="__NEXT_PAGE__/_error" type="text/javascript" src="/_next/1504364251326/page/_error/index.js"></script><div></div><script type="text/javascript" src="/_next/1504364251326/manifest.js"></script><script type="text/javascript" src="/_next/1504364251326/commons.js"></script><script type="text/javascript" src="/_next/1504364251326/main.js"></script></div></body></html> 

、それは必要なすべてのデータが含まれていますが、DOMはまだ空を示して！

domをクライアント側でレンダリングすると、jsは最初のコンテンツを取得し、ロードされたコンテンツを含むページを再配置します。

はここに私のテストページのJSファイルです：

export const fetchAll = dispatch => { 
    dispatch({ 
    type: LOADING_ALL 
    }) 

    return axios.get('/api/frontpage') 
    .then(response => { 
     const data = response.data 
     dispatch({ 
     type: RESET_AUTHORS, 
     payload: data.authors 
     }) 
     dispatch({ 
     type: RESET_PLANTS, 
     payload: data.plants 
     }) 
     dispatch({ 
     type: RESET_POSTS, 
     payload: data.posts 
     }) 
    }); 
} 

が

これで任意の助けいただければ幸いです、私は：それは価値がある

import React from 'react' 
import map from 'lodash.map'; 
import { initStore } from '../lib/store'; 
import * as actions from '../lib/actions'; 
import withRedux from 'next-redux-wrapper'; 

class IndexPage extends React.PureComponent { 
    static getInitialProps = ({ store, req }) => Promise.all([ 
    store.dispatch(actions.fetchAll) 
    ]).then(() => ({})) 

    render() { 
    const latestPlants = this.props.plants.latest || []; 

    return (
     <div> 
     <h1>Test page</h1> 
     { map(this.props.plants.items, p => (
      <div>{p.fields.name}</div> 
     ))} 
     </div> 
    ) 
    } 
} 

export default withRedux(initStore, data => data, null)(IndexPage) 

何のために、ここで私は上記の呼び出しアクションですこの仕事を期待どおりにする方法を失ってしまいました。誰でもリードがありますか？私が明確にすることができるものがあればコメントしてください。

Answer 1

私が最初に私はこのようなもので、ストアを作成します。..さまざまな部分にコードを分割お勧めします。

import { createStore, applyMiddleware } from 'redux'; 
import thunkMiddleware from 'redux-thunk'; 
import reducer from './reducers' 

export const initStore = (initialState = {}) => { 
    return createStore(reducer, initialState, applyMiddleware(thunkMiddleware)) 
} 

その後、私は処理するタイプでストアを作成します：

CONST初期状態= { 著者：ヌル、 ポスト：ヌル、 植物ヌル}

export default (state = initialState, action) => { 
    switch (action.type) { 
    case 'RESET': 
     return Object.assign({}, state, { 
     authors: action.authors, 
     plants: action.plants, 
     posts: action.posts 
     }) 
    default: 
     return state 
    } 
} 

インデックスはこのようなものになります

export const fetchAll = dispatch => { 
    return axios.get('/api/frontpage') 
    .then(response => { 
     const data = response.data 
     dispatch({ 
     type: 'RESET', 
     authors: data.authors, 
     plants: data.plants, 
     posts: data.posts 
     }) 
    }); 
} 

：

import React from 'react' 
import { initStore } from '../store' 
import withRedux from 'next-redux-wrapper' 
import Main from '../components' 

class Example extends React.Component { 
    render() { 
    return (
     <div> 
     <Main /> 
     </div> 
    ) 
    } 
} 

export default withRedux(initStore, null)(Example) 

とコンポーネントメイン：

import React, {Component} from 'react' 
import { connect } from 'react-redux' 
import { bindActionCreators } from 'redux' 
import { fetchAll } from '../../actions' 

class Data extends Component { 
    componentWillMount() { 
    this.props.fetchAll() 
    } 

    render() { 
    const { state } = this.props 
    return (
     <div> 
     <h1>Test page</h1> 
     { map(state.plants.items, p => (
      <div>{p.fields.name}</div> 
     ))} 
     </div> 
    ) 
    } 
} 

const mapStateToProps = (state) => { 
    return { 
    state 
    } 
} 

const mapDistpatchToProps = dispatch => { 
    return { 
    fetchAll: bindActionCreators(fetchAll, dispatch) 
    } 
} 

export default connect(mapStateToProps, mapDistpatchToProps)(Data) 

ための変更を行い、私はこのようなものがあるでしょうアクションで

あなたが必要なもの。

あなたがここにいくつかの完全な例を確認することができます。
Form handler
Server Auth