Не удалось найти "магазин" в контекстном или реквизите "Connect (App)"

У меня возникают проблемы с неправильно сконфигурированным Redux после слияния содержимого нескольких файлов в один, чтобы служить в качестве конфигурации для Redux.

Как разрешить store, сохраняя это в одном файле?

Необработанное исключение JS: не удалось найти "хранилище" в контексте или реквизиты "Connect (App)". Либо оберните корневой компонент в, или явно передать "store" в качестве опоры для "Connect (App)".

'use strict';
import React, { Component } from 'react';
import { createStore, applyMiddleware, combineReducers, bindActionCreators } from 'redux';
import { Provider, connect } from 'react-redux';
import thunk from 'redux-thunk';
import * as screenActions from './redux/actions/screenActions';

import * as reducers from './redux/stores/reducers';

const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
const reducer = combineReducers(reducers);
const store = createStoreWithMiddleware(reducer);

import RootContainer from './redux/views/containers/rootContainer';

class App extends Component {
  render() {
    const { state, actions } = this.props;
    return (
      <Provider store={store}>
        <RootContainer />
      </Provider>
    );
  }
}

export default connect(
  (state) => ({
    state: state.reducer
  }),
  (dispatch) => ({
    actions: bindActionCreators(screenActions, dispatch)
  })
)(App);

ОТВЕТЫ

Ответ 1

  • Провайдер, передает хранилище компоненту, вложенному в него, и обычно должен быть только применяется к компоненту root (в вашем случае <RootContainer>

  • connect подключиться к хранилищу компонентов, а не к компоненту, у которого есть доступ к хранилищу.

ПРЕДЛАГАЕМОЕ РЕШЕНИЕ:

Переместите connect в файл <RootContainer> и передайте connect RootContainer, а не компонент App:

export default connect(
  (state) => ({
    state: state.reducer
  }),
  (dispatch) => ({
    actions: bindActionCreators(screenActions, dispatch)
  })
)(RootContainer);  // <<--- here :)

UPDATE:

Учитывая, что OP хочет достичь всего этого в том же файле, вы будете необходимо создать элемент React, который представляет ваш контейнер Redux созданный из connect, поэтому: 
'use strict';
import React, { Component } from 'react';
import { createStore, applyMiddleware, combineReducers, bindActionCreators } from 'redux';
import { Provider, connect } from 'react-redux';
import thunk from 'redux-thunk';
import * as screenActions from './redux/actions/screenActions';

import * as reducers from './redux/stores/reducers';

const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
const reducer = combineReducers(reducers);
const store = createStoreWithMiddleware(reducer);

import RootContainer from './redux/views/containers/rootContainer';

// name has to be capitalised for React to recognise it as an element in JSX
const ConnectedRoot = connect(
  (state) => ({
    state: state.reducer
  }),
  (dispatch) => ({
    actions: bindActionCreators(screenActions, dispatch)
  })
)(RootContainer);

class App extends Component {
  render() {
    const { state, actions } = this.props;
    return (
      <Provider store={store}>
        <ConnectedRoot />    <------USE IT HERE
      </Provider>
    );
  }
}