web-dev-qa-db-fra.com

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

J'ai des problèmes avec Redux mal configuré après avoir fusionné le contenu de plusieurs fichiers en un seul pour servir de configuration pour Redux.

Comment résoudre store tout en conservant cela dans un seul fichier?

Exception JS non prise en charge: "magasin" introuvable dans le contexte ou les accessoires de "Connect (App)". Enveloppez le composant racine dans un fichier ou passez explicitement le "magasin" en tant que 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.

  • Fournisseur, passe le magasin au composant imbriqué dans celui-ci et généralement nécessaire uniquement pour être appliqué au composant root (dans votre cas, <RootContainer>

  • connect se connecter avec le composant fournissant le magasin et pas le composant qui a le magasin fourni.

SOLUTION SUGGÉRÉE:

[~ # ~] déplacez [~ # ~] le connect vers le <RootContainer> _ composant à la place, et transmettez connect le RootContainer et pas le composant App:

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

MISE À JOUR:

Etant donné que l'OP veut réaliser tout cela dans le même fichier, vous devrez créer un élément React qui représente votre conteneur Redux créé à partir de connect, donc:

'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