React / Redux export default connect () ne semble pas être connecté au fournisseur

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

J'apprends MERN Stack via une playlist YouTube https://www.youtube.com/watch?v=TO6akRGXhx8 . Je suis coincé quand j'ai atteint le 28:04 où il a oublié de connecter son composant avec «react-redux». J'ai suivi comment il le résout mais bon, pour une raison quelconque, la mienne ne semble pas être liée. Aucun accessoire n'a été transmis à mon composant ItemModal. J'ai donc passé 3 heures à déboguer et à conclure enfin que j'ai trouvé bizarre que ce n'est que lorsque le js est nommé ShippingList que connect () fonctionne ... Quand j'ai renommé ShippingList en un autre nom et mis à jour les références, cela ne fonctionne plus. .. Veuillez vous reporter ci-dessous pour une partie de l'extrait de code

Je ne pense pas avoir besoin d'identifier un composant dans le magasin lors de sa création .. je suis donc stupéfait maintenant ..

Je me demandais si vous pouvez le reproduire, veuillez trouver mon dépôt https://github.com/AmeDin/mern

ShoppingList.js

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


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

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

ShoppingListOne.js

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

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

}

export default connect(mapStateToProps, mapDispatchToProps)(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

Autres tests ShoppingListOne

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

ShoppingList

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

Aucune fonction ne semble être appelée pour ShoppingListOne. ShoppingList a une fonction appelée line26, 3e rangée de console.

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