不变违规:无法在“连接(KnowStatus)”的上下文或道具中find“商店”。 将根组件包装在<Provider>中

我是新来的Redux当我服务器端渲染与REDX它扔了我这个错误

不变违规:无法在“连接(KnowStatus)”的上下文或道具中find“商店”。 将根组件包装在a中,或将“store”作为道具显式传递给“Connect(KnowStatus)”。

当我不使用serversiderendering它工作正常但是,当我使用它抛出一个像这样的错误…

ServersiderenderExpress.js

import express from 'express'; import bodyParser from 'body-parser'; import {Server} from 'http'; import React from 'react'; import {renderToString} from 'react-dom/server'; import {match, RouterContext} from 'react-router'; import routes from '../client/routes'; import Helmet from 'react-helmet'; import compression from 'compression'; import favicon from 'serve-favicon'; let app = express(); app.use(bodyParser.json()); app.use(compression()); app.use(favicon(__dirname + '/favicon/favicon.ico')) app.use(express.static('public')); app.get('*', (req, res) => { match({routes, location: req.url}, (err, redirectLocation, renderProps)=> { if (err) { return res.status(500).send(err.message); } if (redirectLocation) { return res.redirect(302, redirectLocation.pathname + redirectLocation.search); } let markup; let rendered = renderToString(<RouterContext {...renderProps}/>); let head = Helmet.rewind(); if (renderProps) { markup = ` <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> ${head.title} ${head.meta} ${head.link} </head> <body> <div id="app"> ${rendered} </div> <script src="bundle.js"></script/> </body> </html>` } res.write(markup); res.end(); }) }); app.listen(3000, () => { console.log('Listening') }); 

match函数返回的renderProps只包含关于req.url应该呈现的路由组件的信息。 您仍然需要呈现一个<Provider>并提供一个商店对象。

 import { createStore } from 'redux' import { Provider } from 'react-redux' match(..., (...) => { // ... // create the store like you do on the client side, giving // it your reducer(s) and possibly an initial state const store = createStore(reducer, initialState) const rendered = renderToString( <Provider store={store}> <RouterContext {...renderProps} /> </Provider> ) // ... })