The prop `store.subscribe` is marked as required

Question

I am trying to connect a component to the redux store, but am receiving:

Warning: Failed prop type: The prop 'store.subscribe' is marked as required inConnect(StoreLocation), but its value is 'undefined'.

I have been using redux with this project for awhile now without issue, but this component is erroring out for some reason and I'm clueless as to why at this point :(

The store populates a collection of stores (brick and mortar locations with addresses, phone numbers, etc used for shipping selections) within DeliverySection.js.

Then each StoreLocation.js component will allow the user to view it's info, select it, etc. It's bare bones right now as I am seeing the error even at this basic point. If I switch the export default connect()(StoreLocation) statement with export default StoreLocation it works without issue.

Any ideas?

DeliverySection.js

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

// Components
import Loader from '../../utils/Loader'
import StoreLocation from './StoreLocation'

// Stote
import { getAllStores } from '../../../store/actions/storeLocation'
import { REACT_APP_SITE_KEY } from '../../../shared/vars'

// CSS
import '../../../css/delivery.css'

class DeliverySection extends Component {
    componentDidMount(){
        this.props.getAllStores(REACT_APP_SITE_KEY);
    }

    render() {
        const { stores, isLoading } = this.props

        return (
            <div>
                <div className="delivery-heading">
                    <h2>Choose a store near you:</h2>
                    <button className="btn btn--red btn--heading" name="ship-to-address">Ship To An Address</button>
                </div>

                <div>
                    {isLoading ? (
                        <Loader />
                    ) : (
                        !isLoading && !!stores ? (
                            stores.map((store, i) => <StoreLocation key={i} store={store} />)
                        ) : (
                            <div>
                                There are no store locations to deliver to.<br />
                                Ship to an address!
                            </div>
                        )
                    )}
                </div>
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        stores: state.storeLocation.stores,
        isLoading: state.storeLocation.isLoading
    }
}

export default connect(mapStateToProps, { getAllStores })(DeliverySection)

StoreLocation.js

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

import { setDelivery } from '../../../store/actions/checkout'

class StoreLocation extends Component {
    render() {
        const { store } = this.props

        return (
            <div className="store-location">
                <div className="store-row">
                    <div className="store-col"><div className="store-title">{store.title}</div></div>
                    <div className="store-col">
                        {store.address}
                        {store.formatted_location &&
                            <div>{store.formatted_location}</div>
                        }
                    </div>
                    <div className="store-col">
                        <button className="btn select-store" onClick={() => this.props.setDelivery(store)}>Ship to this store<span className="icon-checkmark"></span></button>
                    </div>
                </div>
                <div className="store-row">
                    <div className="store-col">
                        <div className="ajax-message" data-hbs-id="postal-{id}"></div>
                        <input type="hidden" id={`postal-${store.id}`} value={store.postal} />
                        <div className="see-map"><span className="icon-location"></span>See on map</div>
                    </div>
                    <div className="store-col">{store.description}</div>
                    <div className="store-col"></div>
                </div>
                {store.phone &&
                    <div className="store-row">
                        <div className="store-col"></div>
                        <div className="store-col">{store.phone}</div>
                        <div className="store-col"></div>
                    </div>
                }
            </div>
        )
    }
}

export default connect(null, { setDelivery })(StoreLocation)
// export default StoreLocation

Answer 1

It's because you are using store as your prop name. You are overwriting the prop react-redux passes through the HOC. Since, the object you pass for store does not have a subscribe method, you get this error.

If you change the name of your prop, you'll be in good shape again.