The code below gives
Uncaught Error: You must pass a component to the function returned by connect. Instead received undefined
List.js
import React from 'react'; import { connect, bindActionCreators } from 'react-redux'; import PostList from '../components/PostList'; // Component I wish to wrap with actions and state import postList from '../Actions/PostList' //Action Creator defined by me const mapStateToProps = (state, ownProps) => { return state.postsList } const mapDispatchToProps = (dispatch) => { return bindActionCreators({"postsList":postList},dispatch) } export default connect(mapStateToProps, mapDispatchToProps)(PostList);
PostList.js
import React from 'react' export const PostList = (props) => { return <div>List</div> }
Please help me with a solution?
You must pass a component to the function returned by connect. Instead received undefined Ask Question Asked3 years, 11 months ago Modified2 years, 5 months ago Viewed12k times
The return of connect () is a wrapper function that takes your component and returns a wrapper component with the additional props it injects. In most cases, the wrapper function will be called right away, without being saved in a temporary variable:
Your component will receive dispatch by default, i.e., when you do not supply a second parameter to connect (): If you define a mapDispatchToProps as a function, it will be called with a maximum of two parameters.
Conventionally called mapDispatchToProps, this second parameter to connect () may either be an object, a function, or not supplied. Your component will receive dispatch by default, i.e., when you do not supply a second parameter to connect (): If you define a mapDispatchToProps as a function, it will be called with a maximum of two parameters.
You are doing import PostList from '../components/PostList';
so you need to use export default
in your PostList.js file.
Otherwise you need to do import { PostList } from '../components/PostList';
.
To whoever is interested, here is a nice article about es6 import/export syntax: http://www.2ality.com/2014/09/es6-modules-final.html
Not related to the asker specifically, but if you're facing this error, it's worth to check if you have the connect() syntax right:
const PreloadConnect = connect(mapStateToProps, {})(Preload); export default PreloadConnect;
Note that Preload, is passed as a IIFE parameter.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With