私は自分のリアクションアプリケーションを私のサーバーにレンダリングしていますが、本当に近いですが、バグに遭遇しています。私はオンラインで検索しましたが、他のすべての答えはバグを修正しませんでした。私はエラーが発生する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};
あなたはバニラノード内のオブジェクトの残りの広がりなどのES6の機能を使用することはできません。 webpackを使用してサーバーバンドルをコンパイルするか、その機能を使用しないでください。 –
私は 'babel-polyfill'をインストールし、サーバコードの最上部に' require( 'babel-polyfill') 'を実行しましたが、まだエラーが出ます。 – joethemow
Andyは、webpackを使用してコードをバンドルするか、require( 'babel-register')をサーバーコードの先頭に置き、 '.babelrc'を作成して' es2015'のようなプリセットを設定する必要があります。 –