Не знаю, почему мой код задает ошибку

Я отрисовка своего приложения React на своем сервере и очень близка, но натолкнулась на ошибку. Я искал в Интернете, и все остальные ответы не исправили ошибку. Я получаю ошибку 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.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'));

App:

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

источник

2017-02-19 joethemow

Вы не можете использовать функции es6, такие как распределение объектов в ванильном узле. Вам нужно либо скомпилировать серверный пакет с webpack, либо не использовать эту функцию. –

Я установил 'babel-polyfill' и сделал' require ('babel-polyfill') 'на самом верху моего кода сервера, и я все еще получаю ошибку, мне нужно что-то делать? – joethemow

Как сказал Энди, вам нужно использовать webpack для связывания кодов или поставить 'require ('babel-register')' в верхней части кода сервера, создайте '.babelrc', чтобы установить пресет как' es2015'. –

Вам необходимо обернуть <RouterContext /> компонентом <Provider />. Код вашего сервера будет выглядеть так:

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

источник

2017-02-19 13:42:34

Ах, это имеет смысл, но как я могу сделать это без привязанных тегов? Узел не распознает этот синтаксис, поэтому я использовал 'response.createElement' – joethemow

' const provider = React.createElement (Provider, {store: store}, [RouterContext]) 'И передать' provider' в 'renderToString() '. –

Итак, когда я добавляю маршрут к моим редукторам '(createStoreWithMiddleware (редукторы))' Я получаю сообщение об ошибке. 'switch (action.type) { 7 | case СТАТУС: > 8 | return {... state, status: true}; 'Unexpected token – joethemow

Не знаю, почему мой код задает ошибку

ответ

Смежные вопросы