web-dev-qa-db-ja.com

「Connect（App）」のコンテキストまたは小道具のいずれにも「store」が見つかりませんでした

複数のファイルのコンテンツを1つにマージしてReduxの構成として機能した後、Reduxの構成が正しくないという問題があります。

これを1つのファイルに保持しながら、storeを解決する方法は？

未処理のJS例外：「Connect（App）」のコンテキストまたは小道具のいずれにも「ストア」が見つかりませんでした。ルートコンポーネントをにラップするか、「store」をpropとして「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);
javascriptreactjsreact-nativereduxreact-redux
28
Peter G.

  • プロバイダー、 はstore をその中にネストされたコンポーネントに渡しますrootコンポーネント（あなたの場合<RootContainer>

  • connectは、ストアを提供するコンポーネントに接続し、ストアが提供されるコンポーネントをnot接続します。

推奨されるソリューション：

MOVEtheconnectto<RootContainer>代わりにコンポーネントファイルを使用し、connectにRootContainerを渡し、notAppコンポーネントを渡します。

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

更新：

OPがこのすべてを同じファイルで実現したい場合、connectから作成されたReduxコンテナーを表すReact要素を作成する必要があります。

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