Вопрос по react-redux, redux, react-native, reactjs, javascript – Поскольку вы определяете отдельный файл для <RootContainer />, я просто переместил туда функцию подключения

24

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

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

Необработанное исключение JS: не удалось найти «store» ни в контексте, ни в подпунктах «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   ответ
15

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

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

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

ПЕРЕЕХАТЬ connect к<RootContainer> вместо этого файл компонента и передатьconnect RootContainer ине компонент приложения:

export default connect(
  (state) => ({
    state: state.reducer
  }),
  (dispatch) => ({
    actions: bindActionCreators(screenActions, dispatch)
  })
)(RootContainer);  // <<--- here :)
ОБНОВИТЬ:

Поскольку 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>
    );
  }
}
Нет, это не так. Это продолжало показывать ту же самую ошибку. Наверное потому чтоconnect() был вызван после<RootContainer /> будучи экземпляром. Peter Gerhat
Поцарапайте мой последний комментарий, мое первоначальное предложение должно было сработать. Я так понимаю, вы получаете такое же сообщение об ошибке? Pineda
Поскольку вы определяете отдельный файл для <RootContainer />, я просто переместил туда функцию подключения Pineda
Хорошо, это возвращает меня к двум файлам. Я спрашивал, можно ли переместить эту конкретную часть сconnect() в<App> составная часть. Peter Gerhat
Это помогает, но изменение самой линии не полностью решило проблему. Проблема все еще остается вокруг линий<Provider store={store}> <RootContainer /></Provider>. Peter Gerhat

Похожие вопросы