2017-02-19 7 views
0

私は自分のリアクションアプリケーションを私のサーバーにレンダリングしていますが、本当に近いですが、バグに遭遇しています。私はオンラインで検索しましたが、他のすべての答えはバグを修正しませんでした。私はエラーが発生するInvariant Violation: Could not find "store" in either the context or props of "Connect(App)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(App)".私は、サーバーコード、インデックス、およびアプリケーションを提供しています。すべての現在の答えは、私が行ったレンダリングされたコンポーネントをラップすると言いますが、まだエラーが発生します。 /ルートはAppコンポーネントをレンダリングします。私のコードがエラーを投げている理由が分かりません

サーバコード:

app.get('*', (req, res) => { 
    const error =() => res.status(404).send('404'); 
    const htmlFilePath = path.join(__dirname, '../build', 'index.html'); 
    fs.readFile(htmlFilePath, 'utf8', (err, htmlData) => { 
    if(err) { 
     error() 
    } else { 
     match({ routes, location: req.url }, (err, redirect, ssrData) => { 
     if(err) { 
      error() 
     } else if(redirect) { 
      res.redirect(302, redirect.pathname + redirect.search); 
     } else if(ssrData) { 
      const store = createStoreWithMiddleware(reducers) 
      const provider = react.createElement(Provider, { store: store }, [RouterContext]); 
      const ReactApp = renderToString(provider); 
      const RenderedApp = htmlData.replace('{{SSR}}', ReactApp); 
     } else { 
      error() 
     } 
     }) 
    } 
    }) 
}) 

インデックス:

ReactDOM.render(
    <Provider store={createStoreWithMiddleware(reducers)}> 
    <Router history={browserHistory} routes={routes} /> 
    </Provider> 
    , document.getElementById('root')); 

アプリケーション:

class App extends Component { 

    componentWillMount() { 
    this.props.info(); 
    } 

    render() { 

    return (
     <div> 
     {this.props.children} 
     </div> 
    ); 
    } 
} 

function mapDispatchToProps(dispatch) { 
    return bindActionCreators({ info }, dispatch); 
} 

export default connect(null, mapDispatchToProps)(App); 

エラー:Unexpected token (8:15)

6 | switch(action.type) { 
    7 |  case TEST_CASE: 
> 8 |  return { ...state, check: true }; 
    |    ^
    9 |  case REAL_CASE: 
    10 |  return { ...state, check: false}; 
+0

あなたはバニラノード内のオブジェクトの残りの広がりなどのES6の機能を使用することはできません。 webpackを使用してサーバーバンドルをコンパイルするか、その機能を使用しないでください。 –

+0

私は 'babel-polyfill'をインストールし、サーバコードの最上部に' require( 'babel-polyfill') 'を実行しましたが、まだエラーが出ます。 – joethemow

+0

Andyは、webpackを使用してコードをバンドルするか、require( 'babel-register')をサーバーコードの先頭に置き、 '.babelrc'を作成して' es2015'のようなプリセットを設定する必要があります。 –

答えて

0

<RouterContext /><Provider />コンポーネントでラップする必要があります。お使いのサーバーのコードは次のようになります。

const store = createStoreWithMiddleware(reducers) 
const ReactApp = renderToString(
    <Provider store={store}> 
    <RouterContext {...ssrData} /> 
    </Provider> 
) 
+0

これは意味があります。アンカータグなしではどうすればいいですか?ノードはその構文を認識しません。そのため、 'react.createElement'を使用しています。 – joethemow

+0

' const provider = React.createElement(プロバイダ、{store:store}、[RouterContext]) ''プロバイダ 'を 'renderToString() '。 –

+0

私のレデューサー( 'createStoreWithMiddleware(reducers))'にルートを追加すると、エラーが出ます。 'switch(action.type){ 7 |ケース状況: > 8 | return {... state、status:true}; '予期しないトークン – joethemow

関連する問題