Paulos3000 Paulos3000 - 19 days ago 5
Javascript Question

React-Redux's connect() method throwing TypeError

Working on the Dan Abramov's excellent tutorial for Redux, and on chap 27 - Generating containers with connect() - a strange bug is occurring:

First I define these two functions:

const mapStateToProps = (state) => {
return {
todos: getVisibleTodos(state.todos, state.visibilityFilter)
};
}
const mapDispatchToProps = (dispatch) => {
return {
onTodoClick: (id) => {
dispatch({
type: 'TOGGLE_TODO',
id
})
}
}
}


Then I import the necessary dependency:

import { connect } from 'react-redux'


Then I create my component using the method exposed from react-redux, and pass in the two functions, finally connecting to my other component,
TodoList
.

const VisibleTodoList = connect(mapStateToProps, mapDispatchToProps)(TodoList);


When I do this, it causes the browser to fail to render and the console returns:

TypeError: Cannot read property 'displayName' of undefined


I have never come across this error before, and it seems specific to the
connect()
method of
react-redux
.

Has anyone come across this before, and/or know what could be causing it?




UPDATE:

getVisibleTodos
is defined above. If its
TodoList
you want to see...

const TodoList = ( {todos, onTodoClick} ) => (
<ul>
{todos.map(todo =>
<Todo key={todo.id}
{...todo}
onClick={() => onTodoClick(todo.id)}
/>
)}
</ul>
)

Answer

You're probably defining the TodoList component after your call to connect. Unlike the var keyword, the ES6 keywords like let, const, and class do not get hoisted to the top of the scope, and only exist starting at the line they're declared on. So, if you call connect() before you've defined TodoList, you're effectively running connect()(undefined). It's also possible that you might have an import statement that's not correct, which could also result in TodoList being undefined.

See https://github.com/reactjs/react-redux/issues/253 for some further discussion.