React/Redux export default connect() doesn't seem to be connected to Provider

Question

[Solved] Check my answers

I'm learning MERN Stack via a youtube playlist https://www.youtube.com/watch?v=TO6akRGXhx8. I'm stuck when i reached the 28:04 where he forgot to connect his component with 'react-redux'. I followed how he resolve it but well, for some reason mine doesn't seem to be connected. No props was pass by to my ItemModal component. So i spent 3hrs to debug and lastly conclude that i found it weird that only when the js is named ShippingList, will connect() works... When I renamed ShippingList to another name and update the references, it doesn't work anymore... Please refer to below for some of the snippet

I dont think i need to identify a component to the store when creating it.. so im stupefied now..

Was wondering if u guys can replicate it, please find my 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();

Screenshot of console.log: https://i.sstatic.net/FPBBs.png

Further testing ShoppingListOne

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

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

}

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

ShoppingList

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


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

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

No functions seems to be called for ShoppingListOne. ShoppingList has a function called line26, 3rd row of console.

https://i.sstatic.net/WxwRm.png

Answer 1

You need to pass mapStateToProps function as first argument to connect in order to make these value available to the component connected to redux store . Connect without any arguments don't do anything except make dispatch available as a prop to the connected component

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

export default connect(mapStateToProps)(ShoppingListOne);

and

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

export default connect(mapStateToProps)(ShoppingList);

Also you need to make sure that you are imported the connected component which is ShoppingListOne exported as a default export rather than a named export

You import would look like

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

Answer 2

You must pass mapStateToProps and mapDispatchToProps to connect, so that it can create a wrapper which has access to redux store.

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