Niezgodne naruszenie: nie można znaleźć "sklepu" w kontekście lub rekwizytach "Połącz (KnowStatus)". Albo owinąć składnika głównego w <Provider>

Jestem nowy Redux kiedy jestem po stronie serwera renderowania z Redux To throwed mi ten błądNiezgodne naruszenie: nie można znaleźć "sklepu" w kontekście lub rekwizytach "Połącz (KnowStatus)". Albo owinąć składnika głównego w <Provider>

Inwariant Naruszenie: nie można odnaleźć „sklep” w każdym kontekście lub rekwizytów z "Połącz (KnowStatus)". Oblewaj element główny w postaci lub jawnie przekazuj "zapisz" jako prop do "Połącz (KnowStatus)".

Gdy nie używam serversiderendering to działa dobrze, ale gdy używam go zgłasza błąd jak to ...

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') 
});

Źródło

2016-12-07 Nane

The renderProps zwracanej przez funkcję match zawiera tylko informacje na temat składników trasy, które powinny być renderowane przez: req.url. Nadal musisz renderować obiekt <Provider> i dostarczać go do obiektu sklepu.

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> 
) 

    // ... 

})

Źródło

2016-12-07 16:51:39

Żałuję, że nie mogę dać ci więcej niż jednego upominku na ten ... – mwigdahl

Jak milion przegranych. Nie wiem, czy kiedykolwiek bym to rozgryzł. – skwidbreth

To samo. Dziękuję bardzo! – cheesyeyes

Niezgodne naruszenie: nie można znaleźć "sklepu" w kontekście lub rekwizytach "Połącz (KnowStatus)". Albo owinąć składnika głównego w <Provider>

Odpowiedz

Powiązane problemy