Impossible de trouver "store" dans le contexte ou les accessoires de "Connect (App)"

Je vais avoir des problèmes avec mal configuré Redux après la fusion de contenu de plusieurs fichiers en un seul afin de servir comme config pour Redux.

Comment résoudre storetout en gardant ce dans un seul fichier?

Non gérée JS Exception: impossible de trouver le "store" dans le contexte
ou les accessoires de "Connect(App)". Soit envelopper le composant racine dans un
ou de transmettre explicitement "store" comme un accessoire à Connecter(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);

source d'informationauteur Peter Gerhat

  1. 13

    • Fournisseur, passe le magasin pour le composant imbriquées et en général seulement besoin d'être appliqué à la racine composant (dans votre cas <RootContainer>

    • connect connecter avec le composant de fournir magasin et pas le composant qui a magasin.

    SOLUTION SUGGÉRÉE:

    DÉPLACER la connect à la <RootContainer> fichier de composant au lieu de cela, et passer connect la RootContainer et pas l'Application de la composante:

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

    Mise à JOUR:

    Compte tenu de l'OP veut réaliser tout cela dans le même fichier, vous devrez créer un Réagir élément qui représente votre Redux conteneur créé à partir de connect, afin de:

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