2

В чём суть вопроса, при подключении Store к компоненту выскакивает ошибка типа:

 Invariant Violation: Could not find "store" in either the context or props of "Connect(App)". Either wrap the root component in a , or explicitly pass "store" as a prop to "Connect(App)".
    at invariant (C:\Users\mr1kr\Desktop\Webpack\node_modules\invariant\invariant.js:42:15)
    at new Connect (C:\Users\mr1kr\Desktop\Webpack\node_modules\react-redux\lib\components\connect.js:131:36)
    at C:\Users\mr1kr\Desktop\Webpack\node_modules\react\lib\ReactCompositeComponent.js:294:18
    at measureLifeCyclePerf (C:\Users\mr1kr\Desktop\Webpack\node_modules\react\lib\ReactCompositeComponent.js:74:12)
    at ReactCompositeComponentMixin._constructComponentWithoutOwner (C:\Users\mr1kr\Desktop\Webpack\node_modules\react\lib\ReactCompositeComponent.js:293:16)
    at ReactCompositeComponentMixin._constructComponent (C:\Users\mr1kr\Desktop\Webpack\node_modules\react\lib\ReactCompositeComponent.js:279:21)
    at ReactCompositeComponentMixin.mountComponent (C:\Users\mr1kr\Desktop\Webpack\node_modules\react\lib\ReactCompositeComponent.js:187:21)
    at Object.ReactReconciler.mountComponent (C:\Users\mr1kr\Desktop\Webpack\node_modules\react\lib\ReactReconciler.js:47:35)
    at C:\Users\mr1kr\Desktop\Webpack\node_modules\react\lib\ReactServerRendering.js:46:36
    at ReactServerRenderingTransaction.Mixin.perform (C:\Users\mr1kr\Desktop\Webpack\node_modules\react\lib\Transaction.js:138:20) 

При чём данная ошибка выбивается только в случае, когда код рендерится на стороне сервера, а в случае, когда серверный рендер отключен, всё работает.

Вот код client.js


    import React      from 'react';
    import ReactDOM   from 'react-dom';
    import  { Provider }    from    'react-redux';

    import configStore from './store/configStore';
    import App from './components/App.component';

    const store = configStore();

    ReactDOM.render(
                    
              
      , 
      document.getElementById('react-view')
    );

Код configStore.js :


    import { createStore } from 'redux'
    import rootReducer from '../reducers'

    export default function configStore(initialState) {
      const store = createStore(rootReducer, initialState)

      if (module.hot) {
        module.hot.accept('../reducers', () => {
          const nextRootReducer = require('../reducers')
          store.replaceReducer(nextRootReducer)
        })
      }

      return store;
    }

rootReduser.js :


    const initialState = {
        user: 'Incognito'
    }

    export default function rootState(state = initialState){
        return state; 
    }

И наконец App.component.jsx :


    import React, { Component } from 'react';
    import { connect } from 'react-redux';
    import './App.component.scss';


    class App extends Component {
        render(){
            return (
                Привет из  App,  { this.props.user }!
            )
        }
    }

    function mapStateToProps(state){
        return{
            user: state.user
        }
    }

    export default connect(mapStateToProps, null, null, {pure: false})(App)

На сервере рендер выполняется функцией,(которая собственно и выдаёт вышеупомянутую ошибку):


    const componentHTML = ReactDom.renderToString();

Как добиться того, чтоб всё работало и при серверном рендеренге.

2 ответа 2

2

Вернула Redux к версии 3.0.1 (от 4.0.1), помогло.

1

Всё решено, дело было в том, что при серверном рендеренге напрямую вызывался App.component.js без инициализации провайдера.

import React from 'react';
import ReactDom from 'react-dom/server';
import {  Provider  } from 'react-redux';

import configStore from './../../client/store/configStore';
import App from './../../client/components/App.component';

const store	= configStore();

const componentHTML = ReactDom.renderToString(
  <Provider store={store}>				
   <App/>		
  </Provider>
);


module.exports = componentHTML;

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.