React/Redux export default connect() ne semble pas être connecté à Provider

Question

[Résolu] Vérifier mes réponses

J'apprends le MERN Stack via une playlist youtube https://www.youtube.com/watch?v=TO6akRGXhx8 . Je suis bloqué quand j'ai atteint les 28:04 où il a oublié de connecter son composant avec 'react-redux'. J'ai suivi la façon dont il l'a résolu mais pour une raison quelconque, le mien ne semble pas être connecté. Aucun props n'a été transmis à mon composant ItemModal. J'ai donc passé 3 heures à déboguer et j'ai finalement conclu que je trouvais bizarre que seulement quand le js s'appelle ShippingList, connect() fonctionne... Lorsque j'ai renommé ShippingList en un autre nom et que j'ai mis à jour les références, cela ne fonctionne plus... Veuillez vous référer à ce qui suit pour quelques exemples.

Je ne pense pas qu'il faille identifier un composant au magasin lors de sa création je suis donc stupéfait

Je me demandais si vous pouviez répliquer ce problème, veuillez trouver mon repo https://github.com/AmeDin/mern

ShoppingList.js

import React, { Component } from 'react'
import { connect } from 'react-redux'

export class ShoppingList extends Component {

  render() {
    console.log(this.props)
    console.log(this.state)
    //const { items } = this.props.item;
    return (
      <div>

      </div>
    )
  }
}

const mapStateToProps = (state) => ({
    item: state.item
})

export default connect()(ShoppingList);

ShoppingListOne.js

import React, { Component } from 'react'
import { connect } from 'react-redux';

export class ShoppingListOne extends Component {

  render() {
    console.log(this.props)
    console.log(this.state)
    //const { items } = this.props.item;
    return (
      <div>

      </div>
    )
  }
}

const mapStateToProps = (state) => ({
    item: state.item
})

export default connect()(ShoppingListOne);

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { createStore, applyMiddleware, compose } from 'redux'
import rootReducer from './reducers/index'
import thunk from 'redux-thunk'
import { Provider } from 'react-redux'
import * as serviceWorker from './serviceWorker';

const middleware = [thunk];

const store = createStore(rootReducer, 
    compose(
        applyMiddleware(thunk)
    )
);
ReactDOM.render(<Provider store={store}><App /></Provider>, 
document.getElementById('root'));

serviceWorker.unregister();

Capture d'écran de console.log : https://i.stack.imgur.com/FPBBs.png

Tests supplémentaires Liste de magasinage

const mapStateToProps = (state) => ({
    item: state.item
})

const mapDispatchToProps = (dispatch) => {
  console.log(dispatch)

}

export default connect(mapStateToProps, mapDispatchToProps)(ShoppingListOne);

Liste d'achats

const mapStateToProps = (state) => ({
    item: state.item
})

const mapDispatchToProps = (dispatch) => {
  console.log(dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)(ShoppingList);

Aucune fonction ne semble être appelée pour ShoppingListOne. ShoppingList a une fonction appelée ligne26, 3ème ligne de la console.

https://i.stack.imgur.com/WxwRm.png

Answer 1

Vous devez passer mapStateToProps comme premier argument de la fonction connect afin de rendre ces valeurs disponibles pour le composant connecté au magasin redux . Connecter sans aucun argument ne fait rien d'autre que de rendre dispatch disponible en tant qu'accessoire du composant connecté

const mapStateToProps = (state) => ({
    item: state.item
})

export default connect(mapStateToProps)(ShoppingListOne);

y

const mapStateToProps = (state) => ({
    item: state.item
})

export default connect(mapStateToProps)(ShoppingList);

Vous devez également vous assurer que vous importez le composant connecté qui est ShoppingListOne exporté en tant qu'exportation par défaut plutôt qu'en tant qu'exportation nommée

Votre importation ressemblerait à

import ShoppingListOne from './path/to/ShoppingListOne';

Answer 2

Vous devez passer mapStateToProps et mapDispatchToProps a relier afin qu'il puisse créer un wrapper ayant accès au magasin redux.

export default connect(mapStateToProps, mapDispatchToProps)(ShoppingList);
export default connect(mapStateToProps, mapDispatchToProps)(ShoppingListOne);

Answer 3

J'ai trouvé le problème...

La déclaration d'importation semble jouer son rôle à la connexion

Erreur

import { ShoppingList } from './components/ShoppingList';
import { ItemModal } from './components/ItemModal';

Correct

import ShoppingList from './components/ShoppingList';
import ItemModal from './components/ItemModal';

Quelqu'un connaît-il les différences ? Est-ce qu'il y a un article qui répond à cette question ?